CSS: display: none と visibility: hidden の違いを確認

要素を非表示にしたい場合、「display: none」と「visibility: hidden」という方法があります。

この2つの違いを結論から言うと、「要素の領域(スペース)があるかないか」の違いです。

「display: none」は要素の領域(スペース)がない
「visibility: hidden」は要素の領域(スペース)がある。(スペースはあるが非表示となっている)

具体的なサンプルを見ると違いがすぐわかりますので、さっそく見てみましょう。

display: none と visibility: hidden サンプル

まず、次のような3行のリストがあるとします。

  • 1行目
  • 2行目
  • 3行目

2行目に「display: none」を指定する

リストの2行目だけに「display: none」を指定すると、次のようになります。

  • 1行目
  • 2行目
  • 3行目

2行目が無いものとして、領域(スペース)が詰められているのがわかると思います。 このように、「display: none」は領域(スペース)が無くなります。

2行目に「visibility: hidden」を指定する

次は、リストの2行目だけに「visibility: hidden」を指定すると、次のようになります。

  • 1行目
  • 3行目

「visibility: hidden」を指定した場合は、 2行目の領域(スペース)は確保されているけれど、非表示になっているのがわかります。

まとめ

上のサンプルで見たとおり、どちらも非表示になるのですが、 「要素の領域(スペース)があるかないか」の違いがあります。

「display: none」は要素の領域(スペース)がない
「visibility: hidden」は要素の領域(スペース)がある。(スペースはあるが非表示となっている)