プログラミングの勉強日記

2020年7月6日　Progate Lv.148
ポートフォリオ作成中

display:noneが効かない原因

　display:noneが効かない原因を調べてみた。

　どれも確認してみたが解決しなかった…
　dislay:noneが効かなかったので、別の方法で要素を非表示にした。

　display:noneと同様にvisibility:hiddenも要素を非表示にすることができる。visibility:hiddenを利用すると要素を非表示にできた！
　ネットで調べてみたけど、理由はわからない…

　上で述べたように見た目上では、どちらも要素を非表示にしている。なので、クリックはどちらもできない。（クリックしたい場合はopacity:0を使う）

visibility:hidden：要素を非表示にする。なので、子孫要素を表示することはできる。
display:none：要素ごと消す（レイアウトが変わる場合がある）。なので子孫要素の表示はできない。

親要素だけ非表示にしたい場合にはvisibility:hiddenを使う。