HTML/CSSだけで動くモーダルウインドウの作り方
HTML/CSSだけで動くモーダルウインドウの作り方を紹介します。JavaScriptを使用せずに実装できるため、シンプルな確認画面や案内表示、注意事項の表示など、クリック操作だけで表示・非表示を切り替えたい場面で利用できます。JavaScriptが不要なので構成が分かりやすく、初めてモーダルウインドウを作成する方にも導入しやすいサンプルです。
このサンプルでは、ボタンをクリックするとモーダルウインドウが表示され、閉じるボタンから元の画面へ戻る基本的な構成をHTMLとCSSのみで実現しています。複雑な処理を使わずに実装できるため、学習用としてはもちろん、小規模なWebサイトやランディングページなどにも利用できます。
ボタンの文字やタイトル、説明文はHTMLから変更でき、背景色やボタンデザイン、モーダルの大きさや余白などはCSSで自由にカスタマイズできます。HTML/CSSだけで完結するモーダルウインドウを作りたい方は、ぜひ参考にしてください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
JavaScriptを使用せず、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_button">
モーダルを開く
</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_overlay">
<!-- 背景クリックでモーダルを閉じる領域 -->
<label
for="html-css-modal-window-close"
class="html-css-modal-window_background">
</label>
<!-- モーダル本体 -->
<div class="html-css-modal-window_modal">
<!-- モーダルタイトル -->
<div class="html-css-modal-window_modal-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>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではラジオボタンとlabel要素を利用してモーダルウインドウの開閉を切り替え、JavaScriptを使用せずに表示・非表示を実現しています。CSSではモーダル本体や背景、ボタンのデザイン、表示切り替え、レスポンシブ表示を設定しており、シンプルな構成で導入できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。タイトル、説明文、ボタンの文字、モーダル内のタイトルや本文を変更できます。ラジオボタンとlabel要素を利用して、モーダルの表示・非表示を切り替えます。
style.cssはページ全体やモーダルウインドウのデザインを設定するファイルです。背景色、文字色、ボタン、モーダル本体、背景の暗さ、角丸、影、余白などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「モーダルを開く」をクリックするとモーダルウインドウが表示され、背景または「閉じる」をクリックすると閉じます。
カスタマイズできる内容
index.htmlではページタイトル、説明文、ボタン名、モーダルタイトル、本文、閉じるボタンの文字を変更できます。用途に合わせて、お知らせ、確認画面、案内メッセージなどへ変更できます。
style.cssではページ全体の横幅、背景色、文字色、ボタンの色、モーダルの横幅、余白、角丸、影、背景の暗さなどを自由に変更できます。
数値調整
style.css
max-width:700px;
操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
操作エリアの内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
操作エリアとモーダル本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
max-width:420px;
モーダル本体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。
padding:36px 28px 28px;
モーダル本体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。
padding:12px 24px;
「モーダルを開く」ボタンの内側余白です。値を大きくするとボタンが大きく表示されます。
padding:10px 20px;
「閉じる」ボタンの内側余白です。値を変更するとボタンの大きさが変わります。
background:rgba(15,23,42,.55);
モーダル表示時の背景の暗さです。.55を大きくすると背景が濃くなり、小さくすると明るくなります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダル本体の影です。数値を大きくすると影が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより、画面幅に応じてモーダル本体や操作エリアが自動で縮小されます。また、640px以下ではpadding:24px 18px;およびpadding:32px 18px 20px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント