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はスペースが残るためレイアウトが安定していることがわかります。

4. どちらを使うべきかのポイント

レイアウトを崩さずに非表示にしたい場合：visibility:hidden
完全に画面から消して周囲を詰めたい場合：display:none
動的な表示切替やモーダル表示など、JavaScriptと組み合わせる場合はdisplay:noneが便利
SEOやスクリーンリーダーへの影響も考慮する必要があります

どちらも用途に応じて使い分けることが大切です。初心者でも簡単に理解できるよう、まずは実際に表示・非表示を切り替える操作を試してみると良いでしょう。

5. display:noneとvisibility:hiddenの比較表

これまでに解説した2つのプロパティの違いを、表にまとめておさらいしましょう。パッと見てどちらを使うべきか判断する際の参考にしてください。プログラミング未経験の方でも、この4つのポイントを押さえておけば実務で困ることはありません。

特徴	display: none	visibility: hidden
見た目	完全に消える	透明になる
占有スペース	なくなる（詰まる）	そのまま残る
クリック操作	できない	できない
読み上げソフト	無視される	無視される

このように、「場所を空けるかどうか」が最大の分かれ道です。基本的には「display:none」を使う場面の方が多いですが、レイアウトを固定したい特定のデザインでは「visibility:hidden」が活躍します。

6. SEOとアクセシビリティの注意点

要素を非表示にする際、私たちが特に気をつけなければならないのが、Googleなどの検索エンジン（SEO）への影響です。2026年現在の検索アルゴリズムでは、ユーザーに価値のある情報を隠す行為は厳しくチェックされています。

例えば、検索順位を上げるためだけに「ユーザーには見えないけれど、キーワードだけを詰め込んだ隠しテキスト」をdisplay:noneで作ると、ペナルティを受けて検索結果に表示されなくなるリスクがあります。逆に、スマホ用メニューやタブ切り替えなど、ユーザーが操作した時に表示される「利便性のための非表示」であれば、SEO上の問題はありません。

また、視覚障害のある方が使う音声読み上げソフト（スクリーンリーダー）も、display:noneやvisibility:hiddenが設定された要素は基本的に読み飛ばします。情報を完全に遮断したいのか、それとも別の方法で伝えるべきなのかを考えるのが、プロのWeb制作者への近道です。