セブではたらく(インターン)
セブではたらく(インターン)
2019.11.21
#202
それいけ!フロントエンド

CSSで要素の表示・非表示を切り替える方法いろいろ

つっちー

こんにちは。フロントエンドのつっちーです。

要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。

これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。

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

他にもあるかもしれませんが、私は主に下記のプロパティで切り替えを実現しています。

  • opacity
  • visibility
  • display

では一つひとつ、特徴と用例をみていきましょう。

1. opacityの切り替え

See the Pen
191001
by ligdsktschy (@lig-dsktschy)
on CodePen.

特徴

  • 非表示のときも、領域が確保される
  • クリック/タップ可
  • transition可

用例

「要素を、スクロールによって画面内に入ったときに表示させる」など。見えるか見えないかを切り替えるだけでよい場合、この方法が使えます。

2. visibilityの切り替え

See the Pen
191002
by ligdsktschy (@lig-dsktschy)
on CodePen.

特徴

用例

見えるか見えないかを切り替えつつ、非表示のときにクリック/タップを無効化したい場合、この方法が使えます。

ただし多くの場合、5. (複合)opacityとpointer-eventsの切り替えに置き換えることができるため、私はあまり利用しません。

3. displayの切り替え

See the Pen
191003
by ligdsktschy (@lig-dsktschy)
on CodePen.

特徴

  • 非表示のときは、領域が確保されない
  • クリック/タップ不可
  • transition不可

用例

「タブ切り替え式のUI」など。

見えるか見えないかを切り替え、非表示のときにクリック/タップを無効化しつつ、領域を後続要素で埋めたい場合に、この方法が使えます。

4. (複合)opacityとpointer-eventsの切り替え

See the Pen
191004
by ligdsktschy (@lig-dsktschy)
on CodePen.

特徴

  • 非表示のときも、領域が確保される
  • クリック/タップ不可
  • transition可

用例

「モーダル(ポップアップ)ウインドウ」など。

見えるか見えないかを切り替え、非表示のときにクリック/タップを無効化しつつ、切り替えるときに透明度の変動をアニメーションさせたい場合、この方法が使えます。

5. (複合)opacityとpointer-eventsとサイズを決めるプロパティの切り替え

See the Pen
191005
by ligdsktschy (@lig-dsktschy)
on CodePen.

特徴

  • 非表示のときは、領域が確保されない
  • クリック/タップ不可
  • transition可

用例

「アコーディオン型のUI」など。

見えるか見えないかを切り替え、非表示のときにクリック/タップを無効化しつつ、切り替えるときにサイズの変動をアニメーションさせたい場合、この方法が使えます。

この方法でのアコーディオン実装に関しては、こちらの記事に詳しくまとまっています。

まとめ

jQueryのshow/hideなど、お手軽な方法もありますが、やっぱりCSSで実現すると動作が軽快で気持ち良いです。

表示、非表示、どんどん切り替えていきましょう!

ではまた! つっちーでした。