CSS: display: none と visibility: hidden の違い
CSSを使ってHTML要素を非表示にしたい場合、 「display: none」と「visibility: hidden」 という方法があります。
一見似ているようなプロパティですが、この2つの違いを結論から言うと、 「HTML要素の領域(スペース)があるかないか」の違いです。
「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行目
- 2行目
- 3行目
「visibility: hidden」を指定した場合は、 2行目の領域(スペース)は確保されているけれど、非表示になっているのがわかります。
まとめ
上のサンプルで見たとおり、どちらも非表示になるのですが、 「要素の領域(スペース)があるかないか」の違いがあります。
「display: none」は要素の領域(スペース)がない。
「visibility: hidden」は要素の領域(スペース)がある。
(スペースはあるが非表示となっている)