先生と生徒の会話形式で理解しよう

生徒

「先生、CSSで特定の要素を画面に表示させたくない時はどうすればいいですか？」

先生

「その場合は、displayプロパティのnoneを使うと簡単に非表示にできます。」

生徒

「display:noneって聞いたことがあります。でも、どんな影響がありますか？」

先生

「display:noneは、その要素を完全に消すので、画面上だけでなくHTML上のスペースもなくなります。注意点を含めて詳しく見ていきましょう。」

1. display:noneで要素を非表示にする方法

CSSのdisplayプロパティにnoneを指定すると、指定した要素は画面上から完全に消えます。これは「非表示」にする方法の中でも最も強力です。通常、不要な広告や一時的なコンテンツ、モーダルウィンドウを表示・非表示する時に使われます。


<style>
    .hidden-box {
        display: none;
        background-color: lightcoral;
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
</style>

<div class="hidden-box">このボックスは非表示です</div>
<p>この下の文章は表示されます。</p>

ブラウザ表示

上記の例では、divのボックスはdisplay:noneで画面上に表示されません。HTML上には存在していますが、目に見えず、他の要素がその場所を占めます。

2. display:noneとvisibility:hiddenの違い

非表示にする方法はdisplay:noneだけではありません。visibility:hiddenも使えますが違いがあります。visibility:hiddenは要素を見えなくしますが、スペースはそのまま残ります。display:noneは要素自体の存在を画面から消すので、周りのレイアウトに影響を与えます。


<style>
    .invisible-box {
        visibility: hidden;
        background-color: lightblue;
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
</style>

<div class="invisible-box">見えませんがスペースは残ります</div>
<p>この文章はボックスの下に表示されます。</p>

ブラウザ表示

display:noneとvisibility:hiddenの使い分けは、レイアウトに影響を与えるかどうかで判断すると分かりやすいです。

3. display:noneを使う際の注意点

非表示にした要素は画面上に存在しないため、クリックやスクロールなどの操作はできません。
検索エンジン（Googleなど）ではdisplay:noneの内容を読み取ることがありますが、重要なコンテンツを隠すとSEO評価に影響する可能性があります。
JavaScriptと組み合わせる場合、display:noneの要素を再表示するにはdisplay:blockやdisplay:inline-blockなどを指定する必要があります。
アニメーションで非表示にしたい場合は、opacityやtransformなどの別手法も検討することがあります。

非表示の扱い方を理解することで、モーダル表示、タブ切り替え、ボタンの表示制御など、ウェブページの動的なデザインが簡単に作れるようになります。

4. display:noneの実践例：ボタンで切り替える

例えば、ボタンをクリックしてテキストを非表示・表示する場合、JavaScriptと組み合わせてdisplay:noneを切り替えることが多いです。こうすることで、ページの見た目を整えつつ、必要に応じて要素を表示できます。


<style>
    .toggle-box {
        display: none;
        background-color: #f0e68c;
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        margin-bottom: 10px;
    }
</style>

<button id="toggleBtn">表示・非表示切替</button>
<div class="toggle-box" id="toggleBox">切替対象のボックス</div>

<script>
    const btn = document.getElementById("toggleBtn");
    const box = document.getElementById("toggleBox");
    btn.addEventListener("click", function() {
        if(box.style.display === "none") {
            box.style.display = "block";
        } else {
            box.style.display = "none";
        }
    });
</script>

ブラウザ表示

この方法を覚えておくと、動的に要素を表示・非表示できるので、ユーザーインターフェースを工夫する幅が広がります。