css display;noneとvisibility:hidden;とopacity:0;の違いを比較

display;none;とvisibility:hidden;とopacity:0;の役割

今回はcssで要素を非表示にする３つのやり方とその違いを紹介するぞ。

要素を非表示にした際の違い

違いは「要素」と「領域」だ。要素を非表示にするのか、領域を非表示にするのかが違ってくる。

See the Pen
display;noneとvisibility:hidden;とopacity:0;の違い by 魔王 (@maou_frontend)
on CodePen.

display;none;の特徴

display;none;を適用すると、指定した要素と領域が両方非表示になる。もちろんクリックもできない。

そのためdisplay;none;を指定すると完全に非表示になる。３つのうち一番強力と言ってももいいかもしれぬな。

visibility:hidden;の特徴

visibility:hidden;を適用すると、指定した要素のみ非表示になり、領域はそのまま残る。要素は非表示なのでクリックはできないぞ。

display;none;との違いは、領域が残るかどうか。codepenのdemoにあるように、領域は残るので、潰れるのではなく空白になるイメージだな。

opacity:0;の特徴

opacity:0;を指定すると、要素が非表示ではなく、透明で見えない状態になっているのだ。

非表示ではなく「見えないだけ」なので、要素も領域も存在しているぞ。demoの空白部分にカーソルを合わせればリンクになっていることがわかるはずだ。

3つの中で一番弱めの非表示といえるであろう。

3つの非表示cssをどう使い分けるのか

今回のこの３つのcssだが、どう使い分けるのか？　簡単にまとめたぞ。

display;none;
完全に非表示にするので、一時的に表示していて、また今度使うかもしれない要素を非表示にしたりできる。または削除やコメントアウトに近い使い方ができるな。

visibility:hidden;
display;none;では領域分も非表示になってしまうので、その分高さが異なってくる。例えばJSでコンテンツの高さを計測したりしていると、それがずれてしまう恐れがある。そういったケースでは display;none;ではなく、単に要素だけ見えなくするvisibility:hidden;のほうが相性が良かったりするのだ。

opacity:0;
opacity:0;は0を1に指定すれば表示される。数字で変化させることが可能だ。cssアニメーションで徐々に見えなくする際に有効だ。


以上がCSSで要素を非表示にする実際の例である。
あくまで一例なので、その時に適したCSSを適用できるといいと思うぞ！