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

スポンサーリンク

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

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

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

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

サンプル

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

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

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

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

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

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

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

まとめ

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

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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト