こんにちは。フロントエンドのつっちーです。
要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。
これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。
表示・非表示の切り替えに使える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.
特徴
- 非表示のときも、領域が確保される
- クリック／タップ不可
- transition可（ただし挙動が特殊で、見かけ上はアニメーションしない）
用例
見えるか見えないかを切り替えつつ、非表示のときにクリック／タップを無効化したい場合、この方法が使えます。
ただし多くの場合、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」など。
見えるか見えないかを切り替え、非表示のときにクリック／タップを無効化しつつ、切り替えるときにサイズの変動をアニメーションさせたい場合、この方法が使えます。
この方法でのアコーディオン実装に関しては、こちらの記事に詳しくまとまっています。
高さ可変！CSSアニメーションでなめらかアコーディオン
つっちー
まとめ
jQueryのshow/hideなど、お手軽な方法もありますが、やっぱりCSSで実現すると動作が軽快で気持ち良いです。
表示、非表示、どんどん切り替えていきましょう！
ではまた！ つっちーでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
