visibility: hidden と display: noneの違い

Lico


visibility: hidden と display: none は、どちらも要素を非表示にするために使いますが、動作や影響範囲が異なります。それぞれの違いについてメモします。


visibility: hidden

  • 動作
    要素は非表示になりますが、その要素の レイアウト（スペース） はそのまま残ります。

  • 使いどころ
    要素を見えなくするが、レイアウトに影響を与えたくない場合に使用します。

  • 例

<div style="visibility: hidden;">隠れた要素</div>
<div>見える要素</div>

結果：「隠れた要素」は表示されませんが、そこにスペースが確保されます。

display: none

  • 動作
    要素は完全に非表示になり、その要素自体がDOM上に存在しないかのように扱われます。
    （結果として、要素のスペースもなくなります。）

  • 使いどころ
    要素を完全に隠して、レイアウトからも影響を排除したい場合に使用します。

  • 例

<div style="display: none;">隠れた要素</div>
<div>見える要素</div>

結果：「隠れた要素」はDOMに存在しないかのようになり、そのスペースも消えます。

違いのポイント

1. 要素の表示

  • visibility: hidden: 要素は透明になる（非表示）だけで、ブラウザには存在している。

  • display: none: 要素が完全に消え、ブラウザ上では存在しないように扱われる。

2. スペースの扱い

  • visibility: hidden: 要素のスペース（レイアウト）はそのまま残る。

  • display: none: 要素が占めていたスペースも消える。

3. インタラクション

  • visibility: hidden: 見えなくなるが、要素は存在しているため、JavaScriptなどで再び表示が可能。

  • display: none: DOMから削除されたように扱われるため、再び表示するにはスタイルを明示的に変更する必要がある。

4. DOM上の扱い

  • visibility: hidden: DOMには要素が残り、スクリーンリーダーなどでは認識されることがある。

  • display: none: DOMに存在しているが、非表示状態ではスクリーンリーダーなどでも認識されないことが多い。

使用例

visibility: hidden のケース

  • アニメーションの準備（例えば、徐々に透明度を変えて要素を表示する）。

  • レイアウトを維持したまま、見えない状態にする必要がある場合。

display: none のケース

  • ナビゲーションメニューやモーダルを動的に切り替える場合。

  • DOM要素を一時的に完全に隠したい場合（例: タブの切り替え）。

補足

  • opacity: 0 という方法もあります。

    • この場合、要素は透明になるだけで、visibility: hiddenと同様にレイアウト内には残ります。

    • ただし、opacity: 0の要素はマウスイベントの対象になります。

いいなと思ったら応援しよう！