今後技術ブログをやっていく前段階としてこのブログで技術記事も書いていこうと思う。また記事を書くタイミングは勉強中に疑問に思ったその時に書く。
じゃないと熱量が保てないのとタスク化してしまうので、結局やらないで終わりそうだから。あとタスク化してどんどん積み上がっていくとストレスが溜まりそう。
ってことで今回多分初？でこのブログで技術記事を書きます。
今回はタイトルの通り、CSSの話。
今までの自分の認識は下記の通り。
・display: none
完全にないものとしてみなす。
・visibility: hidden
見えてないだけである。つまり領域は確保されているので、その領域に別の要素は置けない。モーダルを例にとるとわかりやすいけど、visibility: hiddenにしている要素が親画面にあった場合、モーダルと重なるので、モーダル内にクリックする要素があると、前面にvisibility: hiddenになっている要素があるから、それが邪魔してクリックできなかったりする。
今回調べること
・認識あってる？
・どういう使い分けをするの？
↓調べた結果
ChatGPTに聞いてみた
表示の有無:
display: none: 要素を完全に非表示にし、その領域も取らないようにします。つまり、要素が存在しているかのようなスペースも取りません。
visibility: hidden: 要素は非表示ですが、その領域は保持され、他の要素がその領域を占有します。要素が存在しているかのようなスペースが確保されます。
レイアウトへの影響:display: none: 要素が完全に取り除かれるため、レイアウトに影響を与えません。
visibility: hidden: 要素が非表示でも領域が確保されるため、他の要素の配置に影響を与える可能性があります。
要素の再描画:display: none: 要素が非表示から表示に変わると、その要素は再描画されます。
visibility: hidden: 要素が非表示から表示に変わっても、領域が確保されているため、再描画は発生しません。
使い分けの基準は、要素が完全に非表示にされるか、領域を占有しながら非表示にされるか、といったレイアウトやアニメーションの要件によります。例えば、要素を完全に取り除きたい場合は display: none を使用し、要素の領域を保持しながら非表示にする場合は visibility: hidden を使用します。
概ね想定通り。
他サイトで調べてこれ知らなかったっていうのは、
・display: noneはクローラーの評価に関わり、SEO的にはあまりよくないらしい
・使い分けに関しては、書籍でみるとふんわり表示させるようなアニメーションをつけるならvisibility: hiddenを使ってる。
でも使い分けに関しては、今後の経験で理解していくしかないかなぁって思った。
基本的にvisibility: hiddenを使ったほうがよくて、どうしてもという場合にdisplay: noneを使うっていう理解でも良さそう。
