HTML/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可能

 

使用例

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

 

あわせて読みたい記事

HTML&CSS学習にオススメ『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』

HTML&CSS学習にオススメ『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」は、HTMLとCSSの学習をこれから始めたい、もしくは学習がすでに難しいと感じるあなたにオススメしたい1冊です。...

HTMLとCSSの学習が難しいと感じるあなたにオススメしたい本

HTMLとCSSの学習が難しいと感じるあなたにオススメしたい本プログラミング初心者にとって、HTMLとCSSの学習をいざ始めてみてもよく分からないですよね。この記事では、本で学習することのメリットと、HTMLとCSSの学習が難しいと感じるあなたにオススメしたい本をご紹介します。...

 

まとめ

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

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

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

ABOUT ME
りん
フロントエンドエンジニア / 趣味ブログ / 沖縄から東京に就職1年SE→ 1年フリーランスSE→ 沖縄移住2年Webデザイナー → 福岡移住1年目フロントエンドエンジニア / HTMLCSS大好物 / JS / PHP / Laravel / WordPress / VScodeでVim使う人