🏗️ ステップ1: HTMLでモーダルの骨組みを組む

モーダルウィンドウを作るには、大きく分けて2つの部分が必要になるんだ。

1. モーダルオーバーレイ: モーダルウィンドウが表示されたときに、背景のページ全体を覆う半透明の膜のようなもの。
2. モーダルコンテンツ: 実際に情報が表示される、ウィンドウ本体の部分。

HTMLでは、こんな感じの入れ子構造にするのが一般的だよ。

<!-- 1. モーダルオーバーレイ -->
<div class="modal-overlay" id="myModalOverlay">

  <!-- 2. モーダルコンテンツ (ウィンドウ本体) -->
  <div class="modal-content" id="myModalContent">

    <!-- 2a. モーダルヘッダー (タイトルと閉じるボタン) -->
    <div class="modal-header">
      <h3 class="modal-title">モーダルのタイトル</h3>
      <button class="modal-close-button" aria-label="閉じる">×</button> <!-- × はバツ印のHTMLエンティティ -->
    </div>

    <!-- 2b. モーダルボディ (主要な内容) -->
    <div class="modal-body">
      <p>ここにモーダルウィンドウで表示したい主要なコンテンツを書きます。</p>
      <p>テキストだけでなく、画像やフォームなども入れることができるよ！</p>
    </div>

    <!-- 2c. モーダルフッター (アクションボタンなど) -->
    <div class="modal-footer">
      <button class="btn-secondary">キャンセル</button>
      <button class="btn-primary">OK</button>
    </div>

  </div> <!-- modal-content 終了 -->
</div> <!-- modal-overlay 終了 -->

解説するね！

• <div class="modal-overlay">: これがページ全体を覆うオーバーレイ。ID (myModalOverlay) を付けておくと、後でJavaScriptから操作しやすいよ。
• <div class="modal-content">: これがモーダルウィンドウ本体。オーバーレイの子要素になっているね。
• .modal-header, .modal-body, .modal-footer: モーダルの中身を整理するための一般的な区分。必須ではないけど、こうしておくとCSSでスタイルを整えやすいし、構造も分かりやすくなる。
• .modal-close-button: モーダルを閉じるための「×」ボタン。aria-label="閉じる" は、スクリーンリーダーのユーザーにボタンの目的を伝えるための大切なアクセシビリティ対応だよ。

このHTML構造が、モーダルウィンドウのしっかりとした「土台」になるんだ。

🖌️ ステップ2: CSSで見た目と初期状態をデザインする

HTMLで骨組みができたら、次はCSSで見た目を整えて、普段は隠しておく設定をするよ。

1. モーダルオーバーレイのスタイル

オーバーレイは、画面全体を覆って、背景を少し暗くする役割があるよ。

.modal-overlay {
  display: none; /* ★重要：普段は非表示にしておく */
  position: fixed; /* 画面に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒 (0.6の部分で透明度を調整) */
  z-index: 1000; /* 他の要素より手前に表示するための階層指定 */
}

ポイントはdisplay: none;。これで、最初はモーダル全体が見えないようにしておくんだ。後でJavaScriptを使って、これをdisplay: block;（またはdisplay: flex;など）に変えることでモーダルを表示させるよ。

2. モーダルコンテンツ（ウィンドウ本体）のスタイルと中央配置

次に、モーダルウィンドウ本体の見た目と、画面の中央に表示するためのスタイルだよ。

.modal-content {
  background-color: #fff; /* 背景は白 */
  padding: 25px;
  border-radius: 8px; /* 角を丸く */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* ちょっと影をつける */
  width: 80%; /* 画面幅の80% */
  max-width: 500px; /* でも最大500pxまで */
  min-height: 200px; /* 最低限の高さ */
  z-index: 1001; /* オーバーレイよりさらに手前 */

  /* ▼画面中央に配置するための魔法の呪文 (position:absoluteを使う方法) */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

画面中央に配置する方法はいくつかあるけど、ここではposition: absolute;とtransform: translate(-50%, -50%);を組み合わせる定番の方法を使っているよ。これは「要素の左上を画面の真ん中に持ってきて、そこから要素自身の幅と高さの半分だけ左上に戻す」という動きで、結果的に要素全体がピッタリ中央に来るんだ。

他にも、オーバーレイ要素にdisplay: flex; justify-content: center; align-items: center;を指定して、モーダルコンテンツをFlexboxの子要素として中央配置する方法もあるよ。どっちの方法も便利だから覚えておこう！

3. モーダル内部のスタイル

ヘッダー、ボディ、フッター、閉じるボタンなどのスタイルも、見やすく整えておこう。ここでは基本的な例だけ示すね。

.modal-header { /* 省略: 上記CSS参照 */ }
.modal-title { /* 省略: 上記CSS参照 */ }
.modal-close-button { /* 省略: 上記CSS参照 */ }
.modal-body { /* 省略: 上記CSS参照 */ }
.modal-footer { /* 省略: 上記CSS参照 */ }

これらのクラスを使って、文字の大きさ、色、余白などを自由にデザインできるよ。

🚧 静的なモーダルの完成（まだ動かないよ！）

ここまでのHTMLとCSSを組み合わせると、モーダルウィンドウの「見た目の土台」は完成だ！

ただし、この段階ではまだモーダルは表示されないし、表示させるためのボタンも、閉じるための機能も動かないよ。なぜなら、.modal-overlay に display: none; を指定して隠しているからね。

試しにどんな見た目になるか確認したい場合は、一時的にCSSの.modal-overlay の display: none; をコメントアウトするか、display: block; (または display: flex;) に変更してみてね。（下のデモでは、一時的に表示させるための特別なクラスをCSSに追加しているよ。）

次のステップで、いよいよJavaScriptを使って、このモーダルに命を吹き込んで、表示したり閉じたりできるようにしていくよ！

まとめ

今回は、モーダルウィンドウの見た目と初期状態を作るためのHTMLとCSSの基本を学んだね。

• HTMLで「オーバーレイ」と「モーダルコンテンツ」の2層構造を作るのが基本。
• CSSでオーバーレイを画面全体に広げ、モーダルコンテンツをその中央に配置する。
• そして一番大切なのは、普段はdisplay: none;で隠しておくこと！

これで、モーダルウィンドウを動かすための準備はバッチリだ！ 次のページでは、いよいよJavaScriptを使って、このモーダルウィンドウに「開く」「閉じる」といった命を吹き込んでいくよ。お楽しみに！