HTML/CSSだけで動くモーダルウインドウの作り方
モーダルウインドウは、現在のページを表示したまま、画面の中央に別の内容を表示したいときに使えるUIです。通常はJavaScriptを使って開閉を制御しますが、HTMLのラジオボタンとCSSの:checkedを組み合わせることで、JavaScriptを使わずに開閉することもできます。
このサンプルでは、「モーダルを開く」をクリックすると画面中央にモーダルウインドウを表示し、モーダル内の「閉じる」をクリックすると非表示にします。基本のモーダルウインドウと同じように背景の暗転やぼかしは使用せず、モーダル本体だけが表示されるシンプルな構成です。
JavaScriptを使用しないため、HTMLとCSSだけで完結するモーダルウインドウとして利用できます。簡単な案内や補足説明、確認メッセージなどをページ上に表示したい場合に使いやすく、モーダルの横幅や余白、背景色、ボタンのデザインなどもCSSから調整できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
JavaScriptを使用せず、HTMLとCSSだけでモーダルウインドウを表示できます。
このモーダルウインドウはHTMLとCSSのみで動作しています。
「モーダルを開く」をクリックすると画面中央にモーダルウインドウが表示されます。「閉じる」をクリックするとモーダルウインドウが非表示になります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSだけで動くモーダルウインドウ</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- モーダルウインドウの表示エリア -->
<div class="html-css-modal-window_wrap">
<!-- タイトル -->
<div class="html-css-modal-window_title">
HTML/CSSだけで動くモーダルウインドウ
</div>
<!-- 説明文 -->
<p class="html-css-modal-window_text">
JavaScriptを使用せず、HTMLとCSSだけでモーダルウインドウを表示できます。
</p>
<!-- モーダルウインドウを開くラベル -->
<label
for="html-css-modal-window-open"
class="html-css-modal-window_open">
モーダルを開く
</label>
</div>
<!-- 閉じた状態を管理するラジオボタン -->
<input
type="radio"
name="html-css-modal-window-switch"
id="html-css-modal-window-close"
class="html-css-modal-window_check"
checked>
<!-- 開いた状態を管理するラジオボタン -->
<input
type="radio"
name="html-css-modal-window-switch"
id="html-css-modal-window-open"
class="html-css-modal-window_check">
<!-- モーダルウインドウ -->
<div
class="html-css-modal-window_modal"
role="dialog"
aria-labelledby="html-css-modal-window-title">
<!-- モーダルウインドウのタイトル -->
<div
class="html-css-modal-window_modal-title"
id="html-css-modal-window-title">
モーダルタイトル
</div>
<!-- モーダルウインドウの本文 -->
<p class="html-css-modal-window_modal-text">
このモーダルウインドウはHTMLとCSSのみで動作しています。
</p>
<!-- モーダルウインドウを閉じるラベル -->
<label
for="html-css-modal-window-close"
class="html-css-modal-window_close">
閉じる
</label>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではモーダルウインドウの内容と、開閉状態を管理する2つのラジオボタン、開く・閉じる操作を行うlabel要素を配置します。CSSではモーダルウインドウの表示位置やデザインを設定し、:checkedを利用して表示・非表示を切り替えます。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。「HTML/CSSだけで動くモーダルウインドウ」のタイトル、説明文、「モーダルを開く」の文字、モーダル内のタイトル・本文、「閉じる」の文字を変更できます。また、同じname属性を持つ2つのラジオボタンによって、モーダルの開閉状態を管理します。
style.cssは表示エリア、開くボタン、モーダルウインドウ、閉じるボタンのデザインと表示状態を設定するファイルです。#html-css-modal-window-open:checked~.html-css-modal-window_modalによって、開く状態のラジオボタンが選択されたときだけモーダルウインドウを表示します。背景を暗くするオーバーレイやぼかしは設定していないため、モーダルウインドウ本体だけが画面中央に表示されます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssを読み込む構成になっています。「モーダルを開く」をクリックすると開いた状態のラジオボタンが選択され、画面中央にモーダルウインドウが表示されます。モーダル内の「閉じる」をクリックすると閉じた状態のラジオボタンへ切り替わり、モーダルウインドウが非表示になります。
カスタマイズできる内容
index.htmlでは表示エリアのタイトル、説明文、「モーダルを開く」の文字、モーダルウインドウ内のタイトル・本文、「閉じる」の文字を変更できます。style.cssでは表示エリアとモーダルウインドウの横幅、余白、背景色、文字色、角丸、影、開くボタンと閉じるボタンの色や大きさを変更できます。モーダルウインドウはposition:fixed;で画面を基準に配置し、top:50%;、left:50%;、transform:translate(-50%,-50%);によって画面中央へ表示しています。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。
max-width:700px;
表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
表示エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border:1px solid #e5e7eb;
表示エリアの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:18px;
表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
表示エリアとモーダルウインドウのタイトル文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 12px;
タイトルの下側余白です。12pxを大きくすると次の文章との間隔が広がり、小さくすると狭くなります。
margin:0 0 24px;
説明文とモーダル本文の下側余白です。24pxを大きくすると次のボタンとの間隔が広がり、小さくすると狭くなります。
font-size:16px;
説明文、開くボタン、モーダル本文、閉じるボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
padding:12px 24px;
「モーダルを開く」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
border-radius:8px;
開くボタンと閉じるボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
opacity:.9;
開くボタンと閉じるボタンへマウスを重ねたときの透明度です。値を小さくするとより薄く表示され、1に近づけると通常時との差が小さくなります。
top:50%;
モーダルウインドウを画面上端から50%の位置へ配置します。この値はtransform:translate(-50%,-50%);と組み合わせて縦方向の中央配置に使用しています。
left:50%;
モーダルウインドウを画面左端から50%の位置へ配置します。この値はtransform:translate(-50%,-50%);と組み合わせて横方向の中央配置に使用しています。
z-index:9999;
モーダルウインドウの重なり順です。値を大きくすると、より高い重なり順として扱われます。
width:calc(100% - 40px);
モーダルウインドウの横幅です。画面幅から40pxを引くことで、狭い画面でも左右に合計40pxの余白を確保します。40pxを大きくすると左右の余白が広くなり、モーダルの横幅は狭くなります。
max-width:420px;
モーダルウインドウの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダルウインドウの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
モーダルウインドウの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルウインドウの影です。20pxを大きくすると影が下方向へ移動し、40pxを大きくすると影のぼかしが広がります。
padding:10px 20px;
「閉じる」ボタンの内側余白です。上下の10pxを大きくするとボタンが高くなり、左右の20pxを大きくすると横に広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって表示エリアが画面幅に合わせて縮小され、モーダルウインドウはwidth:calc(100% - 40px)とmax-width:420pxによって画面からはみ出しにくい横幅になります。また、640px以下では表示エリアとモーダルウインドウのpaddingを24px 18pxへ変更して内側余白を抑えているため、スマートフォン・タブレット・PCで利用できます。
コメント