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

要素を消すCSSプロパティ「display」「visibility」「opacity」の違いHTML / CSS

スポンサードサーチ

visibilityプロパティとの出会い

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

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

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

”要素を不可視にしてレイアウトから除去するには、 visibility を使用する代わりに display プロパティを none に設定してください。”
(引用:https://developer.mozilla.org/ja/docs/Web/CSS/visibility

display/visibility/opacityの表示例

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

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

まずはdispaly:noneでの表示。

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

続いてopacity:0

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

最後にvisibility:hidden

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

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

display:noneopacity:0visibility:hidden;
目視見えない見えない見えない
レイアウト残らない残る残る
HTML上見えない見える見える
フォーカス当たらない当たる当たらない

スポンサードサーチ

visibilityの使用例(Twitterより)

3つのこと

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

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

まとめ

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

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

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

コメント

タイトルとURLをコピーしました