はじめに
Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。
ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！
モーダルを表示する
まず、モーダルの表示をCSSだけで実現します。
基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。
checkboxを使う場合
checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。
紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。
See the Pen CSSModal_simple_checkbox by maabow (@szdqiygj-the-sasster) on CodePen.
<details>タグを利用する場合
折りたたみ要素の表示切り替えをモーダルの表示切り替えに利用しています。
summaryタグのクリックによって状態が切り替わるため、pointer-eventsの制御に少し工夫が必要です。
See the Pen CSSOnlyModal_details by maabow (@szdqiygj-the-sasster) on CodePen.
:target擬似クラスを使う場合
アンカーで指定された要素に擬似クラス:targetがつくことを利用して、モーダルの表示を制御しています。
個人的には、今回紹介している表示のやり方の中では一番スマートなやり方だと思います。
See the Pen Untitled by maabow (@szdqiygj-the-sasster) on CodePen.
アニメーションをつける
多くのサイトではモーダル表示でアニメーションが設定されています。
今回紹介するのはそのうちの一部ですが、これらを組み合わせることで様々なアニメーション表示に応用できます。
ディゾルブ
See the Pen CSSOnlyModal_dissolve by maabow (@szdqiygj-the-sasster) on CodePen.
拡大
See the Pen CSSOnlyModal_expansion by maabow (@szdqiygj-the-sasster) on CodePen.
フォール
See the Pen CSSOnlyModal_fall by maabow (@szdqiygj-the-sasster) on CodePen.
フリップ(横回転)
横向きに回転させることで、カードが裏返るようなアニメーションを実現しています。
See the Pen CSSOnlyModal_rotate by maabow (@szdqiygj-the-sasster) on CodePen.
背景のスケールダウン
モーダル表示時に背景のコンテンツのスケールを小さくすることで、よりモーダルの要素が強調されます。
See the Pen CSSOnlyModal_scaledown by maabow (@szdqiygj-the-sasster) on CodePen.
おわりに
CSSだけでモーダルの表示とアニメーション効果を通じてリッチなユーザーインターフェースを実現できました。
実際のアプリケーションではデータのやり取りも伴うため、JavaScriptの使用が避けられない場合もあります。その際は、モーダルの表示切り替えをJavaScriptで行うとより効率的かもしれません。
CSSを使ったアニメーション操作はモーダル以外にもよく使われるので、ぜひ参考にしてみてください。