意図に合わせた使い分けが重要！ visibility: hidden と display: none のメリットとデメリット

2024-04-05

表示状態

visibility: hidden: 要素は非表示になりますが、スペースは保持されます。つまり、他の要素はその存在を認識し、その分のスペースを空けてくれます。
display: none: 要素は非表示になり、スペースも占有しなくなります。他の要素はあたかもその要素が存在しないかのように配置されます。

アクセシビリティ

visibility: hidden: スクリーンリーダーなどの支援技術で読み上げられます。

パフォーマンス

visibility: hidden: 要素は非表示になりますが、DOMツリーに残ります。そのため、パフォーマンスへの影響は比較的軽微です。
display: none: 要素は非表示になり、DOMツリーから削除されます。そのため、パフォーマンスへの影響はより大きくなります。

用途

visibility: hidden: 一時的に要素を非表示にしたい場合や、要素のスペースを保持したい場合に使用します。
display: none: 要素を完全に非表示にしたい場合や、パフォーマンスを向上させたい場合に使用します。

visibility: hidden と display: none は、どちらも要素を非表示にするプロパティですが、いくつかの重要な違いがあります。それぞれの特性を理解して、目的に合ったプロパティを選択することが重要です。

補足

visibility: hidden と display: none は、opacity: 0 とも併用できます。

<div class="box">
  <h1>タイトル</h1>
  <p>これはボックスです</p>
</div>

<button onclick="toggleVisibility()">非表示/表示</button>

<script>
function toggleVisibility() {
  const box = document.querySelector('.box');
  
  // visibility: hidden を使用
  // box.style.visibility = 'hidden';

  // display: none を使用
  box.style.display = 'none';
}
</script>

toggleVisibility() 関数を呼び出すと、box 要素の visibility または display プロパティが切り替えられます。

このコードを実行して、それぞれのプロパティによる違いを確認してみてください。

CSSで要素を非表示にするその他の方法

opacity プロパティを使用して、要素の透明度を0にすることで、要素を非表示にすることができます。

.element {
  opacity: 0;
}

ただし、opacity: 0 は要素を完全に透明にするだけで、要素自体は依然として存在します。そのため、スクリーンリーダーで読み上げられたり、マウスイベントを受け付けたりします。

position: absolute と left: -9999px を使用して、要素を画面外に移動することで、要素を非表示にすることができます。

.element {
  position: absolute;
  left: -9999px;
}

この方法は、visibility: hidden や display: none と同様に、要素を完全に非表示にすることができます。ただし、position: absolute を使用すると、要素のレイアウトが崩れる可能性があります。

pointer-events: none を使用して、要素に対するマウスイベントを無効にすることで、要素を非表示にすることができます。

.element {
  pointer-events: none;
}

この方法は、要素を視覚的に非表示にするだけでなく、ユーザーが要素と対話できないようにすることもできます。

要素を完全に非表示にし、スクリーンリーダーで読み上げられたり、マウスイベントを受け付けないようにしたい場合は、display: none を使用するのが最善です。
要素を一時的に非表示にしたい場合は、visibility: hidden を使用するのが最善です。
要素を透明にしたい場合は、opacity: 0 を使用するのが最善です。
要素を画面外に移動したい場合は、position: absolute と left: -9999px を使用するのが最善です。
要素に対するマウスイベントを無効にしたい場合は、pointer-events: none を使用するのが最善です。

それぞれの方法のメリットとデメリットを理解して、目的に合った方法を選択することが重要です。

css visibility