こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
モーダルウィンドウといえば、JavaScriptで表示・非表示を切り替える実装が一般的です。
しかし、最近ではCSSだけでシンプルなモーダルを実現する方法も注目されています。
この記事では、checkboxや:target擬似クラスを活用し、一切JavaScriptを使わずにモーダルを開閉するテクニックを解説します。
軽量で依存性がなく、静的サイトやちょっとしたデモにも最適な方法です。
CSSだけでモーダルを作る方法
CSSでモーダルを作るには、大きく分けて2つのアプローチがあります。
- :target擬似クラスを使う方法（アンカーリンクで開閉）
- checkbox＋labelで状態を管理する方法（フォーム利用）
ここでは:target方式を中心に解説します。
HTMLとCSSだけで動作するので、JSが使えない環境でも安心です。
1 基本コード（:targetを使ったモーダル）
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
checkbox方式との違い
- :targetはURLハッシュを利用するため、ページ遷移の履歴に影響する
- checkbox方式はフォーム要素を利用し、ハッシュを使わない
- どちらもJS不要だが、UI要件に応じて使い分けると便利
UI改善のポイント
- 背景クリックで閉じる演出はCSSだけでは難しい → 擬似要素で擬似クリック領域を作る工夫
- フォーカス制御はCSSのみでは困難 → アクセシビリティ重視ならJS併用も検討
- アニメーションをtransformやopacityで滑らかに表現
2 基本コード（checkbox方式）
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- URLのハッシュを使わないため履歴に残らない
- トグル制御が簡単で複数モーダルにも応用可能
- 背景クリックで閉じる場合はCSSだけだと難しいが工夫可能
まとめ
CSSだけで作るモーダルの魅力！
軽量で依存がなく、静的ページやデモに最適。
アクセシビリティや高度な制御が不要なら、この方法だけで十分実用可能です。
プロジェクトに合わせて、JSとのハイブリッド化も検討すると良いでしょう。