【CSS】display/visibility/opacityの比較・違いまとめ

HTML/CSS

要素を非表示にする方法であるdisplay: none, visibility: hidden, opacity: 0の違いについて具体例つきで紹介します。

display: none, visibility: hidden, opacity: 0の比較まとめ

領域確保 イベント(click, hoverなど)発行
display: none 無 無
visibility: hidden 有 無
opacity: 0 有 有

検証用サンプルコード

挙動を確認するサンプルコードは以下の通りです。
各ブロックにはcursor: pointerが適用されており、マウスオーバーでカーソルはポインタに変更します。

<div class="container">
  <div class="item other"></div>
  <div class="item display">display: block</div>
  <div class="item visibility">visibility: visible</div>
  <div class="item opacity">opacity: 1</div>
  <div class="item other"></div>
</div>


.container {
  display: flex;
}

.item {
  width: 130px;
  height: 80px;
  cursor: pointer;
}

.item:not(:last-child) {
  margin-right: 10px;
}

.display {
  display: block;
  background: lightgreen;
}

.visibility {
  visibility: visible;
  background: lightblue;
}

.opacity {
  opacity: 1;
  background: pink;
}

.other {
  background: black;
}

See the Pen
Untitled by Toshiharu Nishina (@nishina555)
on CodePen.

『display: none』について

displayは要素の表示形式を変更するプロパティです。

display: noneを適用すると要素の横幅や高さがなくなります。
要素の存在をレイアウトから完全に消したい場合はdisplay: noneを利用します。

display: blockをdisplay: noneにした際の変化の違いは以下の通りです。

See the Pen
Untitled by Toshiharu Nishina (@nishina555)
on CodePen.

See the Pen
display-visibility-opacity-none by Toshiharu Nishina (@nishina555)
on CodePen.

『visibility: hidden』について

visibilityは要素の表示・非表示を制御するプロパティです。

visibility: hiddenはdisplay: noneと違い、画面から消えたあとも要素の領域は残り続けます。
つまり、visibility: hiddenを利用することで『要素は存在するが見えない状態』を実現できます。

要素の領域を残して非表示にしたい場合はvisibility: hiddenを利用します。

visibility: visibleをvisibility: hiddenにした際の変化の違いは以下の通りです。

See the Pen
Untitled by Toshiharu Nishina (@nishina555)
on CodePen.

See the Pen
display-visibility-opacity-hidden by Toshiharu Nishina (@nishina555)
on CodePen.

『opacity: 0』について

opacityは不透明度を表現するプロパティで、0から1の値を設定できます。
opacity: 0を適用した要素は透明、つまり画面から見えなくなります。

visibility: hiddenと同じく要素の領域は残り続けます。しかしvisibility: hiddenと違いopacity: 0ではイベントが発行されます。

opacity: 0は『徐々に消えていく（あるいは見えてくる）』というアニメーションをtransitionプロパティを利用して実装する際によく利用されます。
その際、visibility: hiddenを組み合わせることで『アニメーションで非表示になった要素のイベント発行をなくす』ということが実現できます。

opacity: 1をopacity: 0にした際の変化の違いは以下の通りです。opacity: 0の場合、マウスオーバーでポインタに変化する挙動は継続します。

See the Pen
Untitled by Toshiharu Nishina (@nishina555)
on CodePen.

See the Pen
display-visibility-opacity-zero by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

RECOMMEND