CSSを使った要素の表示・非表示の切り替えにはいくつかの方法があります。それぞれの方法には特有のプロパティの組み合わせがあり、用途に応じて使い分ける必要があります。この記事では、よく使用される方法を整理してまとめました。
表示・非表示の切り替えに使えるCSSプロパティ
主に以下のプロパティを使用しています。
opacityvisibilitydisplay
これらのプロパティを使う理由は、JavaScriptやjQueryで実装するよりも手軽にできるからです。CSSで簡単に実装できる方が効率的だと思いませんか？
それでは、それぞれの方法を詳しく見ていきましょう。
要素の領域を埋める表示・非表示の切り替え
要素の領域を埋める表示・非表示を切り替える方法を２つまとめます。
①アニメーション付きの表示・非表示
See the Pen
rNadzmZ by りん@webコーダー (@rinblog0408)
on CodePen.
特徴
- 表示・非表示の切り替えにアニメーションがある。
- 非表示のときは、領域が確保されない。
transitionが可能。
使用例
LP制作時に頻繁に使用しています。表示・非表示の変動にアニメーションを加えることで、自然な切り替えが可能です。特に領域が大きい場合、アニメーションがないと違和感を感じやすいため、これが有効です。
②アニメーションなしの表示・非表示
See the Pen
MWYVvLz by りん@webコーダー (@rinblog0408)
on CodePen.
特徴
- 表示・非表示の切り替えにアニメーションがない。
- 非表示のときは、領域が確保されない。
transitionは不可。
使用例
要素の表示・非表示を単純に切り替えたい場合に適しています。アニメーションを不要とするケースに便利です。
要素の領域を埋めない表示・非表示の切り替え
要素の領域を埋めない表示・非表示を切り替える方法を２つまとめます。
③アニメーション付きの表示・非表示
See the Pen
xxbWXEw by りん@webコーダー (@rinblog0408)
on CodePen.
特徴
- 表示・非表示の切り替えにアニメーションがある。
- 非表示のときも領域が確保される。
transitionが可能。
使用例
要素の可視性を切り替えつつ、表示・非表示にアニメーションを加える場合に使用します。要素が見える・見えないを滑らかに切り替えたい時に最適です。
④アニメーションなしの表示・非表示
See the Pen
oNgqGWY by りん@webコーダー (@rinblog0408)
on CodePen.
特徴
- 表示・非表示の切り替えにアニメーションがない。
- 非表示のときも領域が確保される。
transitionは可能。
使用例
要素の可視性を即座に切り替えたい場合に使用します。シンプルな非表示切り替えを必要とするケースに適しています。
まとめ
今回は、CSSプロパティを使った表示・非表示の切り替え方法を紹介しました。JavaScriptやjQueryでも実現可能ですが、私はCSSで簡単に実装できる方が効率的だと感じています。自分に合った方法を見つけて、表示・非表示を自在に切り替えていきましょう。
