こんにちは、Webデザイナーのりんです。
CSSで要素の表示・非表示を切り替える方法っていくつか種類があり、CSSプロパティの組み合わせによって表示・非表示の方法を変えられます。
組み合わせがいくつかあると混乱しがちになるので、ここで整理しておこうと思い、まとめてみました。
表示・非表示の切り替えに使えるCSSプロパティ
表示・非表示の切り替えに、ぼくは主に下記のプロパティを使ってます。
- opacity
- visibility
- display
理由として、jsやjQueryによる実装がめんどくさいからです。
CSSで簡単にできる方が楽だと思いませんか？
ということで、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可能
使用例
見えるか見えないかで要素を切り替え、表示・非表示をアニメーションさせたくない場合にこの方法が使えます。
あわせて読みたい記事
HTML&CSS学習にオススメ『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』
https://rinblog.org/html-css-to-learn-book/
HTMLとCSSの学習が難しいと感じるあなたにオススメしたい本
まとめ
今回は、CSSプロパティでできる表示・非表示を切り替える方法についてまとめました。
jsやjQueryで実現できる方法もありますが、ぼくは、CSSで実装する方が楽なんですよね。
自分が楽だと思う方法で、表示・非表示をどんどん切り替えていきましょう。
