HTML/CSSだけで動くモーダルウインドウの作り方
HTML/CSSだけで動くモーダルウインドウの作り方を紹介します。JavaScriptを使用せずに実装できるため、シンプルな確認画面や案内表示、注意事項の表示など、クリック操作だけで表示・非表示を切り替えたい場面で利用できます。JavaScriptが不要なので構成が分かりやすく、初めてモーダルウインドウを作成する方にも導入しやすいサンプルです。
このサンプルでは、ボタンをクリックするとモーダルウインドウが表示され、閉じるボタンから元の画面へ戻る基本的な構成をHTMLとCSSのみで実現しています。複雑な処理を使わずに実装できるため、学習用としてはもちろん、小規模なWebサイトやランディングページなどにも利用できます。
ボタンの文字やタイトル、説明文はHTMLから変更でき、背景色やボタンデザイン、モーダルの大きさや余白などはCSSで自由にカスタマイズできます。HTML/CSSだけで完結するモーダルウインドウを作りたい方は、ぜひ参考にしてください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「モーダルを開く」をクリックするとモーダルウインドウが表示されます。JavaScriptを使用せず、HTMLとCSSだけで表示・非表示を切り替える動作を確認できます。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルだけで動作するモーダルウインドウです。JavaScriptを使用せず、HTMLとCSSのみでモーダルの表示・非表示を切り替えます。ファイルを分けて管理しているため、デザインの変更や文章の差し替えもしやすく、初心者でも構成を理解しながらカスタマイズできます。
sample/
├── index.html
└── style.css
各ファイルの役割
・index.html：モーダルウインドウのHTML構造や表示する文章、ボタンを記述します。
・style.css：レイアウト・背景・ボタン・モーダルの表示・非表示・色・余白・角丸などのデザインを設定します。
使い方
sampleフォルダ内へindex.htmlとstyle.cssを配置し、index.htmlをブラウザで開くと動作を確認できます。サーバーは不要で、HTMLファイルを開くだけですぐに利用できます。
変更できる内容
・タイトル・説明文・ボタンの文字はindex.htmlで変更できます。
・ボタンやモーダルの色・文字サイズ・余白・角丸・影・モーダルの横幅はstyle.cssで変更できます。
・背景の暗さはstyle.cssの背景色（rgba）の値を変更することで調整できます。
数値調整
・style.cssのmax-widthを変更するとモーダルの最大横幅を変更できます。
・style.cssのpaddingを変更するとモーダルやボタンの余白を調整できます。
・style.cssのborder-radiusを変更すると角丸の大きさを調整できます。
・style.cssのrgba(...,0.55)の最後の数値を変更すると背景の暗さが変わります。0に近づけるほど薄く、1に近づけるほど濃く表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%;とmax-widthを使用しているため、画面サイズに応じてモーダルの横幅が自動調整されます。スマートフォン・タブレット・PCでもレイアウトが崩れにくく、そのまま利用できます。
ファイル構成と設置方法
このサンプルはHTMLファイルとCSSファイルのみで動作します。JavaScriptは不要なので、2つのファイルを同じフォルダに配置するだけですぐに利用できます。
sample/
├── index.html
└── style.css
index.htmlとstyle.cssを同じフォルダへ保存し、ブラウザでindex.htmlを開いてください。モーダルを開くボタンをクリックすると、HTMLとCSSだけで実装したモーダルウインドウを表示できます。背景部分または「閉じる」ボタンをクリックするとモーダルを閉じることができます。
コメント