プログラミングの勉強日記
2020年7月6日 Progate Lv.148
ポートフォリオ作成中
display:noneが効かない原因
display:noneが効かない原因を調べてみた。
- 意図しないところで
display:blockのようにdisplayプロパティが使用されている - Fontawesomeの読み込みが自分のCSSの読み込み前に読み込まれている
- セレクタを間違えている
どれも確認してみたが解決しなかった…
dislay:noneが効かなかったので、別の方法で要素を非表示にした。
visibilityプロパティ
display:noneと同様にvisibility:hiddenも要素を非表示にすることができる。visibility:hiddenを利用すると要素を非表示にできた！
ネットで調べてみたけど、理由はわからない…
display:none と visibility:hiddenの違い
上で述べたように見た目上では、どちらも要素を非表示にしている。なので、クリックはどちらもできない。（クリックしたい場合はopacity:0を使う）
visibility:hidden：要素を非表示にする。なので、子孫要素を表示することはできる。
display:none：要素ごと消す（レイアウトが変わる場合がある）。なので子孫要素の表示はできない。
親要素だけ非表示にしたい場合にはvisibility:hiddenを使う。
参考文献
https://blog.keisuke11.com/webdesign/display-none-visibility-hidden/
https://www.irohabook.com/display-none