CSS

【CSSで表示・非表示】opacity,visibility,displayで切り替える方法

こんにちは、Webデザイナーのりんです。

CSSで要素の表示・非表示を切り替える方法っていくつか種類があり、CSSプロパティの組み合わせによって表示・非表示の方法を変えられます。

組み合わせがいくつかあると混乱しがちになるので、ここで整理しておこうと思い、まとめてみました。

 

表示・非表示の切り替えに使えるCSSプロパティ

表示・非表示の切り替えに、ぼくは主に下記のプロパティを使ってます。

  • opacity
  • visibility
  • display

 

理由として、jsやjQueryによる実装がめんどくさいからです。
CSSで簡単にできる方が楽だと思いませんか?

ということで、CSSでできる方法を一つ一つ見ていきましょう。

 

要素の領域を埋める表示・非表示

要素の領域を埋める表示・非表示を切り替える方法を2つまとめます。

 

①表示・非表示をアニメーションさせる

See the Pen
rNadzmZ
by りん@webコーダー (@rinblog0408)
on CodePen.

 

特徴

  • 表示・非表示の切り替えにアニメーションがある
  • 非表示のときは、領域が確保されない
  • transition可能

 

使用例

ぼくがLP制作をするときはこれをよく使います。

表示・非表示の切り替えるときの変動をアニメーションさせたい場合にこの方法が使えます。
また、非表示になった領域を次の要素で埋めたい場合にこの方法が使えます。

領域(高さ)が大きい場合にアニメーションをさせないと、表示・非表示に違和感を感じる切り替えになることがあります。
そこで、アニメーションを入れることで違和感を感じさせない表示・非表示にすることができます。

 

②表示・非表示をアニメーションさせない

See the Pen
MWYVvLz
by りん@webコーダー (@rinblog0408)
on CodePen.

 

特徴

  • 表示・非表示の切り替えにアニメーションがない
  • 非表示のときは、領域が確保されない
  • transition不可能

 

使用例

非表示になった領域を次の要素で埋めたい場合にこの方法が使えます。

表示・非表示のときにアニメーションをさせたくない場合にこの方法が使えます。

 

要素の領域を埋めない表示・非表示

要素の領域を埋めない表示・非表示を切り替える方法を2つまとめます。

 

③表示・非表示をアニメーションさせる

See the Pen
xxbWXEw
by りん@webコーダー (@rinblog0408)
on CodePen.

 

特徴

  • 表示・非表示の切り替えにアニメーションがある
  • 非表示のときも、領域が確保される
  • transition可能

 

使用例

見えるか見えないかで要素を切り替え、表示・非表示をアニメーションさせたい場合にこの方法が使えます。

 

④表示・非表示をアニメーションさせない

See the Pen
oNgqGWY
by りん@webコーダー (@rinblog0408)
on CodePen.

 

特徴

  • 表示・非表示の切り替えにアニメーションがない
  • 非表示のときも、領域が確保される
  • transition可能

 

使用例

見えるか見えないかで要素を切り替え、表示・非表示をアニメーションさせたくない場合にこの方法が使えます。

 

まとめ

今回は、CSSプロパティでできる表示・非表示を切り替える方法についてまとめました。

jsやjQueryで実現できる方法もありますが、ぼくは、CSSで実装する方が楽なんですよね。

自分が楽だと思う方法で、表示・非表示をどんどん切り替えていきましょう。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...

 

ABOUT ME
りん
沖縄から福岡に移住。QA/Webデザイナー/SE/フリーランス/SE人事など。趣味や好きなことをブログにまとめてます。