ダークモード対応モーダルウインドウの作り方
ダークモード対応モーダルウインドウの作り方を紹介します。ダークモードは、画面全体を落ち着いた配色で表示するデザインとして、多くのWebサイトやWebアプリで採用されています。本記事では、HTML・CSS・JavaScriptだけを使い、ライトモードとダークモードのどちらでも見やすく表示できるモーダルウインドウを実装します。
サンプルコードでは、「モーダルを開く」ボタンをクリックするとモーダルウインドウが表示されます。また、「ダークモード切替」ボタンをクリックするとページ全体とモーダルの配色が切り替わり、それぞれの表示を確認できます。背景色や文字色、ボタンの配色を切り替えるだけのシンプルな構成なので、既存サイトへ導入しやすく、自分のデザインに合わせて自由にカスタマイズできます。
管理画面やダッシュボード、会員サイト、Webアプリなど、ダークモードへ対応したUIを作成したい場面で活用できます。モーダル内のタイトルや本文はHTML、ライトモード・ダークモードそれぞれの配色はCSS、切替処理はJavaScriptで変更できます。ダークモード対応モーダルウインドウの基本構成として、そのまま利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ダークモード向けデザインのモーダルウインドウを確認できます。
「モーダルを開く」をクリックすると、ダークモード向けデザインのモーダルウインドウを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>ダークモード対応モーダルウインドウ</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- デモ全体 -->
<div class="modal-window-dark-mode_wrap">
<!-- タイトル -->
<h1 class="modal-window-dark-mode_title">
ダークモード対応モーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-window-dark-mode_text">
ボタンをクリックするとダークモード向けデザインのモーダルウインドウを表示します。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-window-dark-mode_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-window-dark-mode_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="modal-window-dark-mode_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2
id="modal-title"
class="modal-window-dark-mode_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="modal-window-dark-mode_modal-text">
ダークモード向けの配色で表示するモーダルウインドウです。閉じるボタンをクリックするとモーダルを閉じます。
</p>
<!-- 閉じるボタン -->
<button
class="modal-window-dark-mode_close"
type="button"
data-modal-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLでモーダルウインドウの画面構成を作成し、CSSでダークモード向けの配色やレイアウトを設定、JavaScriptでモーダルの表示・非表示を制御します。 ダークモードを前提とした配色で統一しているため、管理画面やダッシュボード、Webアプリなどへそのまま導入しやすい構成です。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
・index.html：モーダルタイトル・本文・開くボタン・閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：ダークモード向けの背景色・文字色・ボタン・余白・角丸・影・モーダルサイズなど、見た目全体を設定します。
・script.js：「モーダルを開く」ボタンと「閉じる」ボタンのクリックイベントを処理し、モーダルの表示・非表示を切り替えます。
設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ index.htmlをブラウザで開きます。
④ 「モーダルを開く」ボタンをクリックするとダークモード向けデザインのモーダルウインドウが表示されます。
⑤ 「閉じる」ボタンをクリックするとモーダルを閉じます。
カスタマイズできる内容
・index.htmlでは、タイトル・説明文・モーダルタイトル・本文・ボタンの文字を変更できます。
・style.cssでは、背景色・文字色・ボタン色・余白・角丸・枠線・影・モーダルの横幅などを自由に変更できます。
・style.cssの配色を変更すると、独自のダークテーマやブランドカラーへ合わせることもできます。
・script.jsでは、モーダルを開く・閉じる処理を自由に変更できます。
数値調整
・style.cssの「max-width:700px;」を変更するとデモ全体の横幅を調整できます。
・style.cssの「max-width:420px;」を変更するとモーダルの横幅を調整できます。
・style.cssの「padding:32px;」「padding:28px;」を変更すると余白を調整できます。
・style.cssの「border-radius:18px;」を変更すると角の丸みを調整できます。
・style.cssの「box-shadow:0 20px 40px rgba(0,0,0,.45);」を変更すると影の広がりや濃さを調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「box-sizing:border-box;」を設定しているため、スマートフォン・タブレット・PCでも画面幅に応じてモーダルが適切なサイズで表示されます。また、640px以下では余白を調整し、小さな画面でも見やすいレイアウトになるよう対応しています。
コメント