CSSで要素を非表示にする方法を比較！visibility:hiddenとdisplay:noneの違い

visibility: hidden と display: none の違いとは？

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

生徒

「先生、CSSで要素を非表示にする方法っていくつかあると聞きました。違いは何ですか？」

先生

「大きく分けて、display:noneとvisibility:hiddenがあります。それぞれの動作が違うので使い分けが大切です。」

生徒

「具体的にどう違うんですか？」

先生

「順番に説明しますね。簡単な例も見ながら理解しましょう。」

1. display:noneとは何か？

CSSのdisplay:noneは、対象の要素を画面上から完全に消します。つまりHTML上には存在していますが、見た目としてもスペースとしても消えるため、周囲の要素がその場所を埋めます。非表示にした要素はクリックもできませんし、画面に占める領域もなくなります。


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

<div class="box-none">このボックスは非表示です</div>
<p>この文章は上にスペースがなく表示されます。</p>

ブラウザ表示

display:noneはモーダルや一時的な非表示コンテンツに便利ですが、レイアウト調整の際は注意が必要です。

2. visibility:hiddenとは何か？

visibility:hiddenは要素を「見えなくする」プロパティです。画面上には表示されませんが、要素のスペースは残ります。そのため、周りのコンテンツのレイアウトは崩れません。


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

<div class="box-hidden">見えませんがスペースは残ります</div>
<p>この文章の位置はボックスの下になります。</p>

ブラウザ表示

visibility:hiddenはレイアウトを崩さずに非表示にしたい場合に便利です。ただし、クリックやフォーカスなどの操作はできなくなるため注意しましょう。

3. display:noneとvisibility:hiddenの違いを簡単な例で理解

例えば、ボタンで表示・非表示を切り替える場合を考えてみます。display:noneは要素自体が消えるので、切り替えた際に周囲の要素が移動します。visibility:hiddenはスペースを保持するため、表示・非表示を切り替えてもレイアウトはほぼ変わりません。


<style>
    .box1 { display: none; background-color: #f0e68c; width: 200px; height: 50px; text-align: center; line-height: 50px; margin-bottom: 10px; }
    .box2 { visibility: hidden; background-color: #90ee90; width: 200px; height: 50px; text-align: center; line-height: 50px; margin-bottom: 10px; }
</style>

<button onclick="document.getElementById('b1').style.display='block'">display:noneを表示</button>
<div id="b1" class="box1">display:noneのボックス</div>

<button onclick="document.getElementById('b2').style.visibility='visible'">visibility:hiddenを表示</button>
<div id="b2" class="box2">visibility:hiddenのボックス</div>

ブラウザ表示

この例を見ると、display:noneは要素が消えることでレイアウトが変わり、visibility:hiddenはスペースが残るためレイアウトが安定していることがわかります。