CSSのみでモーダルウィンドウを作成

JavaScriptを使わずにモーダルウィンドウを実装できますか？

CSSだけでモーダルウィンドウは実装できます！

jQueryなどのJavaScriptを使って作成することが多いモーダルウィンドウですが、CSSのみでも作成することが可能です。

JavaScriptが使えない制作環境での実装におすすめです。

モーダルウィンドウの実装イメージ

本記事で実装するLightbox風モーダルウィンドウのイメージです。

実装するモーダルウィンドウの特徴

jQuery、JavaScript不使用

jQuery、JavaScriptを使わず、HTMLとCSSのみで実装します。

<inputタグ> 、<labelタグ>不使用

<inputタグ>、<labelタグ>で実装するモーダルウィンドウもありますが、本記事のモーダルウィンドウはCSSの:taget擬似クラスを利用しています。

Yahoo!ショッピングの商品ページなど、 <inputタグ>使用不可の制作環境でも利用できます。

レスポンシブ対応

レスポンシブ対応でパソコン、スマホ両方に利用できます。

モーダルウィンドウを実装する

HTML

アンカーリンク（ページ内リンク）でサムネイルとモーダルウィンドウを紐づけます。

例）サムネイルにhref="#modal-01"、モーダルウィンドウにid="modal-01"を指定

複数設置したいときは各モーダルウィンドウに別個のidを割り振ってください。

href="#!"は<aタグ>をクリックしてもどこにも遷移させない場合に指定します。

CSS

:target擬似クラスを利用してモーダルウィンドウの表示／非表示を切り替えています。

デモ

Lightbox風のモーダルウィンドウ

See the Pen 【CSSのみ】Lightbox風のモーダルウィンドウ by ざきひー (@zakihiii) on CodePen.0

サムネイルとモーダルウィンドウで別々の画像を指定することも可能です。

閉じるボタン、または半透明の背景をクリックすることでモーダルウィンドウを閉じることができます。

テキスト内包のモーダルウィンドウ

See the Pen 【CSSのみ】モーダルウィンドウ by ざきひー (@zakihiii) on CodePen.0

画像だけでなく、テキストももちろん内包することができます。

さあモーダルウィンドウを実装しよう

HTMLに特別な記述は必要なく、CSSの:target疑似クラスのみで実装できるモーダルウィンドウです。

特にJavaScriptやinputタグが使えない制作環境での実装におすすめ！