モーダルウィンドウの作り方

2025/09/14

モーダルウィンドウを作るとき、

ふぅあん

アクセシビリティ対応ってこれでいいの？ dialogタグって何？

ウチノ

色々考えすぎて自分のコードに自信がなくなるときあるよね。

そんな悩みを解決する現代的なモーダルウィンドウの作り方を、実際のコードとともに詳しく解説します。

dialogタグを使えば、divタグで実装した場合より簡単に実装が可能です。

モーダルウィンドウとは

サイト上に別画面を表示させて注意を引く画面という認識です。

このあたりは他のサイトにも色々と書いてありますが実際に見てみましょう。

0.5くらいで見ていただくといいかもです。縦スクロールもします。

See the Pen モーダルウィンドウ by UCHINO (@UCHINO-web-service) on CodePen.

モーダルウィンドウのコード解説

コード解説

CodePenのコードを以下にまとめました。

<button id="modalOpen">モーダルウィンドウを開く</button>
<dialog class="modal" aria-labelledby="modalTitle" aria-describedby="modalText">
  <div class="modal__inner">
    <h2 id="modalTitle" class="modal__title">モーダルウィンドウ</h2>
    <p id="modalText" class="modal__text">モーダルウィンドウを作る前に色々と考えることがありすぎてどうすればいいのかわからないという方はコピペしておいてください。</p>
		<button id="modalClose" class="modal__close">閉じる</button>
	</div>
</dialog>

dialogタグについてですが、モーダル作成では利用したほうが便利です。

具体的には dialogタグを使うと最初非表示で、borderや paddingが標準装備されています。これだけでも全体のコード記述量が減らせます。

ブラウザ対応も比較的対応の遅い Safariも2022年に対応ずみです。

参考サイト　Can I use


const dialog = document.querySelector("dialog");
const body = document.querySelector("body");

// ウィンドウを開く処理
const openBtn = document.querySelector("#modalOpen");
openBtn.addEventListener("click", () => {
	dialog.showModal();
	body.classList.add("no-scroll");
});

// ウィンドウを閉じる処理
const closeBtn = document.querySelector("#modalClose");
closeBtn.addEventListener("click", () => {
	dialog.close(); // モーダルダイアログを閉じる
	body.classList.remove("no-scroll");
});

// ウィンドウ以外をクリックしても閉じる処理
dialog.addEventListener("click", (e) => {
	if (e.target === dialog) {
		dialog.close();
		body.classList.remove("no-scroll");
	}
});

さらに JavaScriptで showModal()メソッドをつかって表示させると自動でトップレイヤーとして表示され、かつ背景を background-colorで少しトーンダウンしてくれます。

その時のスタイルシートとHTMLの状態が下の画像です。

これが自動付与なので全体的に JavaScriptや CSSの記述を減らせるということです。

CSSは overflow以下は関係ないので割愛します。

アクセシビリティについて

<dialog class="modal" aria-labelledby="modalTitle" aria-describedby="modalText">
  <div class="modal__inner">
    <h2 id="modalTitle" class="modal__title">モーダルウィンドウ</h2>
    <p id="modalText" class="modal__text">モーダルウィンドウを作る前に色々と考えることがありすぎてどうすればいいのかわからないという方はコピペしておいてください。</p>
		<button id="modalClose" class="modal__close">閉じる</button>
	</div>
</dialog>

dialogタグを使う前は divタグに role=”dialog” や aria-modal=”true” といった ARIA属性を記述していましたが、dialogタグを使用すると不要です。

ただ、dialogタグの「タイトル（aria-labelledby）」と「説明（aria-describedby）」が何であるかをスクリーンリーダーに伝える必要はあります。

aria-labelledby と aria-describedby のそれぞれ属性を使用し、タイトルタグの idと同じ名前にする必要はあります。説明用のタグも同様に idと合わせます。

モーダルウィンドウの使いやすさのために

ユーザーのためにモーダルウィンドウを使いやすくするためのコツを書いておきます。

モーダルウィンドウ表示時の背景は固定する

せっかく見てほしいウィンドウが開いても、背景が動いていると気になりますよね。

だからモーダルウィンドウが開いている間は、背景は固定するのがおすすめです。

そこで今回はCSSでbodyタグにクラス名を付与する形で実装しました。

// ウィンドウを開く処理
const openBtn = document.querySelector("#modalOpen");
openBtn.addEventListener("click", () => {
	dialog.showModal();
	body.classList.add("no-scroll"); // ここでクラス名を付与
});

/* 背景固定のため */
body.no-scroll {
  overflow: hidden;
}

実は dialogタグのには closedby=”any”という属性をつけると dialogタグの外側をクリックしても閉じる機能を実装できます。

しかしこの機能は執筆時点2025年9月現在では Safariが対応しておりません。

モーダルコンテンツの外側をクリックしても閉じる実装を

大手ニュースサイトなどでは、わずらわしい広告を表示させたうえに、小さい小さい ☓ ボタンをタップしないといけなくなっており、意図せず広告を開いてしまうことなどもあると思います。

そこで、下記画像のモーダルウィンドウ以外の部分をクリックやタップしてもモーダルを閉じる動きをつけてあげると、

特にスマホやタブレットユーザーは便利かと思います。

// ウィンドウ以外をクリックしても閉じる処理

dialog.addEventListener("click", (e) => { // どこがクリックされたか確認 
	if (e.target === dialog) {
		dialog.close();
		body.classList.remove("no-scroll");
	}
});

if (e.target === dialog) の部分で少し解説しておくと、

今回は外側をクリックしても閉じたいのが欲しい機能です。

しかし、e.targetは dialogではないのになぜ === なのかと思われた方。

実は先ほど少しご紹介したように、dialogタグを使うと