CSSスタイル変更の基本 — el.style.display = 'none'
要素を「非表示」にする最短の方法が style.display = 'none'。表示したいときは 'block' など適切な表示値に戻します。動作はシンプルですが、使いどころと注意点を押さえると失敗が減ります。
基本の使い方
<div id="panel">コンテンツ</div>
<button id="hide">非表示</button>
<button id="show">表示</button>
<script>
const panel = document.getElementById("panel");
document.getElementById("hide").addEventListener("click", () => {
panel.style.display = "none"; // 完全に非表示（レイアウトからも除外）
});
document.getElementById("show").addEventListener("click", () => {
panel.style.display = "block"; // ブロック要素として表示（元の表示形式に注意）
});
</script>
- none: 要素は画面にもレイアウトにも現れなくなります。
- 戻す値: 多くは
'block'か'inline'。元がflexやgridの場合はその値に戻すのが正しいです。
よく使うテンプレート集
クリックでトグル（ON/OFFの切り替え）
const box = document.getElementById("box");
document.getElementById("toggle").addEventListener("click", () => {
box.style.display = (box.style.display === "none") ? "" : "none";
});
- ポイント:
""は「インラインスタイルをクリアしてCSSに委ねる」意味。CSSで初期表示を管理している場合はこれが便利。
フォームのバリデーションでエラーメッセージを出す
function showError(el, msg) {
const hint = el.nextElementSibling; // 例: 隣の小さなエラー領域
hint.textContent = msg;
hint.style.display = "block";
}
function clearError(el) {
const hint = el.nextElementSibling;
hint.style.display = "none";
}
リストの絞り込み（部分的に非表示）
const items = document.querySelectorAll(".item");
function filter(keyword) {
items.forEach(li => {
const hit = li.textContent.toLowerCase().includes(keyword.toLowerCase());
li.style.display = hit ? "" : "none";
});
}
display と visibility の違い
- display: ‘none’: レイアウトから完全に除外。スペースも残らない。スクリーンリーダーにも通常は非表示として扱われます。
- visibility: ‘hidden’: 見えなくなるが、レイアウト上のスペースは残る。配置崩れを避けたいときに有効。
el.style.visibility = "hidden"; // スペースは残す
el.style.visibility = "visible"; // 再表示
実務でのコツ
- 元の表示形式を意識する: 元が
flexなら再表示はel.style.display = "flex"。何度も切り替える場合は「CSSクラスで管理」するとミスが減る。 - classListで状態管理: 見た目の切り替えはクラスが安全・再利用しやすい。
.hidden { display: none; }
.panel { display: grid; } /* 例: 本来はgrid表示 */
panel.classList.add("hidden"); // 非表示
panel.classList.remove("hidden"); // 表示（CSSが本来のdisplayに戻す）
- アニメーションするなら opacity/height:
displayはトランジションできない。フェードならopacityとpointer-events、スライドならmax-heightなどを使って演出。 - アクセシビリティ: 非表示なら
aria-hidden="true"を併用するとスクリーンリーダーが読み上げない設計にできる（クラス切り替え時に属性も切り替える）。
ありがちなハマりポイントと対策
- 再表示で ‘block’ に固定してしまう: 元が
inlineやflexなのに毎回'block'を使うと崩れる。クラスで管理するか、正しい値に戻す。 - CSSとの競合: 外部CSSが
!importantを使っているとstyle.displayが効かないことがある。スタイル設計を見直す。 - トグルの初期状態ズレ: 初期CSSが非表示なのに、JSでいきなり
'none'判定するとズレる。クラスベースに切り替えるか、getComputedStyle(el).displayで現在の計算値を参照。
練習問題（手を動かして覚える）
<div id="panel" class="panel">内容</div>
<button id="open">開く</button>
<button id="close">閉じる</button>
<button id="fade">フェード表示</button>
<style>
.panel { display: flex; gap: 8px; }
.hidden { display: none; }
.fade {
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
.fade.show {
opacity: 1;
pointer-events: auto;
}
</style>
<script>
const panel = document.getElementById("panel");
document.getElementById("open").addEventListener("click", () => {
// クラスで表示管理（本来のdisplayを保てる）
panel.classList.remove("hidden");
});
document.getElementById("close").addEventListener("click", () => {
panel.classList.add("hidden");
});
// アニメーション表示の例（displayは使わずopacityで演出）
const fadeBtn = document.getElementById("fade");
panel.classList.add("fade"); // 初期は透明
fadeBtn.addEventListener("click", () => {
panel.classList.toggle("show");
});
</script>
直感的な指針
- 手早く隠すなら
style.display = 'none'、戻すときは元の表示形式に。 - 何度も切り替えるUIは「CSSクラスで管理」して本来のレイアウトを保つ。
- 演出が必要なら
displayではなくopacityやheightでトランジションする。