要素を消すCSSプロパティ「display:none」「visibility:hidden」「opacity:0」の違い

visibilityプロパティとの出会い

WordPressをいじっていたら、メニューのオープン・クローズの動作に「visibility:hidden（↔visible）」というCSSプロパティを使っていることを発見しました。

これまでCSSで要素を消す、非表示にする、といえばdisplay:noneとopacity:0くらいしか使ってきませんでした。

MDNで調べたところ、以下のような説明がされていました。

display/visibility/opacityの表示例

「ん？じゃあいつ使うの？」と思ったので、とりあえずコードを書き換えて比べてみました。

ボタンを押すと下に子メニューが表示されるコードです。非表示のCSSを適用していない画面がこちら。

まずはdispaly:noneでの表示。

はい、すべて消えております。

続いてopacity:0

こちらはリストは消えておりますが、要素（レイアウト）自体は残っているという感じ。

最後にvisibility:hidden

ちなみにvisibility:hiddenはフォーカスが当たらないそうです。
（参考サイト：http://var.blog.jp/archives/51539053.html）

わかりやすいよう、表でまとめてみました。

visibilityの使用例（Twitterより）

非表示プロパティのそれぞれの特徴はわかりましたが、visibilityはあまり使う場面は来なそうな気が…。

と、思いつつvisibilityについてTwitterでつぶやいたところ、つよつよな方々から数々の有益な情報を教えていただきましたので共有します。

クリッカブルにしたくないかつ CSS アニメーションが組み合わさると visibility じゃないと実現できないですね。

例を作ってみました：https://t.co/tvfYWXVb38

display: none; の場合はアニメーションが動きません。

opacity: 0; のみの場合はその背面にあるリンクをクリックできません。

— 𝐊𝐢𝐭𝐞 (@ixkaito) September 1, 2020

たまにいつ使うんだろっていうのありますよね笑

スクロールした時にふわっと出てくるコンテンツとかで使えそうって思いました👀
私だったらopacity使いますけど笑

— しょうみゆ👽Webクリエイター (@MykiiTech) September 1, 2020

visibilityはアニメーション可能です。実際は表示・非表示しかありませんが、transition: visibility 0.2s にすると0.2秒後に表示・非表示に切り替わります。
モーダル表示などでopacityと組み合わせると便利です。
（display: noneはアニメーション不可なのですぐに消えてしまいます）

— ICS にしはら🦞@z-index完全に理解した (@crayfisher_zari) September 1, 2020

visibilityって意外と面白くて

<ul>
<li>aaa
<li>bbb
<li>ccc

ul {visibility: hidden;}
li:nth-child(2) {visibility: visible;}

ってやるとulの領域保ったままbbbだけ表示されるんだよね
まぁ使い所もあまり思い浮かばないんだけどw
opacityでもいいんだけどクリッカブルにしたくないときとか? https://t.co/adcibq8uo6

— そらまめ@コーヒー好きなコーダー (@GCGA_JP) September 1, 2020

(スクロールで要素表示するアニメーションする時にめちゃくちゃ使う…) https://t.co/UVVZC1M1P3

— TAK / Web Creator. (@tak_dcxi) September 1, 2020

スライダーブラグインslickで実装する時に、jQueryやが画像の読み込みが遅く、レイアウトが一瞬崩れるように見えることがあります。
そのような場合に、display:noneでなく、visibility:hiddenを使った記憶があります。

また、個人的にスマホメニューのフェイド（イン）アウトにも使っています。 https://t.co/xH9jYyisnh

— DONGWORKS | Webデザイナー (@dongworksxx) September 1, 2020

まとめ

とにかくアニメーションが絡んでくる場合にはvisibilityが活躍しそうだということがわかりました。

とは言え実装方法は何パターンもあると思うので、状況に合わせて使えるよう、引き出しの一つとして覚えておきたいと思います。

ご教授してくださった実装者の皆様、ありがとうごじあました。