CSS：要素の表示⇔非表示の切り替えテクニック

単に非表示にしたい時

要素を非表示にしたいケースは大きく分けて2パターンあるかと思います。 1つは、冒頭でも例として出しましたが、デバイスによってサイドバーなどを非表示にしたい場合。そしてもう1つは、メニューの小項目など、普段は隠しておきたいが必要に応じて表示と非表示をアニメーションで切り替えたい…という場合です。

要素を非表示にするだけで、アニメーションによる表示切り替えが必要ない場合は、displlay: none;で消してしまうのが一番楽です。

displayプロパティを使って非表示にした要素は、単に見えなくなるというだけでなく、要素の幅や高さもなくなり、クリックも不可になってくれます。そのため、width/heightやpointer-eventプロパティを同時に設定する必要がありません。

非表示にしたい要素をセレクタ指定し、displayプロパティを適用させるだけなので、CSS調整も簡単です。当然ですが、子孫要素も含めて要素が非表示になります。

下のサンプルは、pタグの親要素であるdivタグにdisplay: none;を適用させるボタンをつけたものです。ボタンをクリックすると、pタグの文章も含めて全て非表示になることがわかります。

この文章も含めて非表示になります。

display: none;を適用する

コードは以下の通りです。

また単に要素が見えなくなるだけでなく、幅と高さがなくなるため、表示・非表示を切り替えると他の要素が移動することがわかります。

ただ、ボタンによる表示切り替えで違和感を持った方もいらっしゃるのではないでしょうか？ボタンを押した瞬間、パッと非表示⇔表示に切り替わってしまうので、一瞬何が起こったのか分かりづらい感じがします。

displayプロパティはtransitionが無効であるため、transitionプロパティを指定したとしても、ゆっくりと切り替え表示にすることはできません。

なのでdisplayプロパティを使って非表示にする場合は、非表示にしたままで良い場合や、表示・非表示を切り替えるにしてもフワッとした切り替え方（アニメーション・トランジション）にする必要がない場合に向いています。