モーダルウィンドウを作る

(Sample)

今回は「モーダルウィンドウ」について、新人エンジニアの方向けにやさしく解説していきます。「モーダルって何？」「どうやって作るの？」といった疑問を一緒に解決していきましょう！

モーダルとは何か？

まず、「モーダル」という言葉に注目しましょう。

✅ モーダルの意味は？

modal = 「モードに入っている状態」という意味です。

通常の画面操作を一時停止して、「これを先に処理してください」とユーザーに伝えるようなイメージです。後ろの画面を操作できないようにして、前面のウィンドウに集中させるための仕組みです。

どんな場面で使うの？

例えば以下のようなケースで使われます。

モーダルウィンドウの構造を理解しよう

それでは、今回のHTMLとCSSのコードをベースに、初心者の視点で仕組みを分解してみましょう。

ステップ1：モーダルを開くためのリンク

<a href="#my_modal-window">クリックしてモーダルウィンドウ</a>

このリンクは、id="my_modal-window"の場所へジャンプします。CSSで:targetを使うことで、ジャンプされたときにモーダルが表示されるようになっています。

ステップ2：モーダル本体のHTML

<div id="my_modal-window" class="my_modal">
  <div class="my_modal__content">
    <!-- モーダルの中身 -->
  </div>
</div>

この#my_modal-windowが、モーダル全体（背景含む）を包んでいるブロックです。その中に、白いウィンドウ本体となる.my_modal__contentが入っています。

ステップ3：モーダル表示の仕組み（CSS）

初期状態（非表示）

.my_modal {
  visibility: hidden;
  opacity: 0;
}

最初は透明で非表示です。

表示状態（リンクで指定されたとき）

.my_modal:target {
  visibility: visible;
  opacity: 1;
}

href="#my_modal-window"のリンクがクリックされると、CSSの:targetが発火して、モーダルが表示されます。

ステップ4：モーダルを閉じる

<a href="#" class="my_modal__close">×</a>

このリンクはhref="#"と指定されているため、もう一度別の場所に移動＝ターゲット解除され、モーダルが閉じます。

ポイントは JavaScriptなしでも動く というところ。CSSだけで表示・非表示を切り替えられるんです！

モーダルのCSSで重要なテクニック

背景を暗くする方法

background: rgba(77, 77, 77, .7);

これは黒に近いグレーを70%の透明度で塗りつぶす指定です。背景を暗くすることで、前面のウィンドウを目立たせる効果があります。

画面中央に配置する方法

display: flex;
align-items: center;
justify-content: center;

この3つの指定で、上下左右の真ん中に配置できます。フレックスボックスの力は強力です！

まとめ

• 「モーダル」は他の操作をロックして、1つの画面に集中させるUI部品
• :target疑似クラスを使えばJavaScriptなしでも作れる
• Flexboxを使って中央に表示できる
• 背景を暗くすることで視線を誘導できる

モーダルウィンドウを作る　最後までお読みいただきありがとうございます。