2025/07/03

HTMLのdialog要素とは？使い方を初心者向けに徹底解説！

Webサイトでよく見かける「モーダルウィンドウ」や「ポップアップ表示」。
お知らせを表示したり、ユーザーに確認を求めたりするときに非常に便利ですよね。
これまではJavaScriptライブラリを使ったり、複雑なCSSを組んだりする必要がありましたが、HTMLのdialog要素を使えば、驚くほど簡単に実装できてしまいます。

この記事では、HTML初心者の方でも安心して使えるように、dialog要素の基本的な使い方から、JavaScriptを使った制御方法、カスタマイズ方法まで、具体的なサンプルコードを交えながら分かりやすく解説します。

具体的には以下のような内容について紹介していきます。

dialog要素の基本的な役割とメリット
JavaScriptを使ったダイアログの表示・非表示方法
モーダル/モードレスの違い（showModal()とshow()）
CSSを使ったダイアログのスタイリング方法
コピペしてすぐに試せる実践的なサンプルコード

dialog要素とは？

dialog要素は、その名の通り、ダイアログボックスやサブウィンドウをWebページ上に表示するためのHTML要素です。主な特徴は以下の通りです。

HTMLだけで意味付けができる: divタグではなく専用のタグを使うことで、この部分がダイアログであるとブラウザや検索エンジンに正しく伝えられます。
JavaScriptで簡単に制御: 表示・非表示を制御するための専用のメソッド（showModal(), close()など）が用意されています。
アクセシビリティへの配慮: モーダル表示時に背景のコンテンツを不活性化したり、Escキーで閉じたりする機能が標準で備わっており、スクリーンリーダーなどにも配慮されています。

つまり、少ないコードで、誰にとっても使いやすいダイアログを実装できる、非常に強力な要素なのです。

基本的な使い方【最初のステップ】

まずは、最もシンプルなダイアログを作成してみましょう。必要なのはHTMLと少しのJavaScriptだけです。

1. HTMLを記述する

HTMLの構造はとてもシンプルです。ダイアログとして表示したいコンテンツをdialogタグで囲むだけです。ダイアログを開くためのボタンも一緒に用意しましょう。

HTML
<!-- ダイアログを開くボタン -->
<button id="open-dialog-btn" class="sample-button">ダイアログを開く</button>

<!-- ダイアログ本体 -->
<dialog id="my-dialog" class="sample-dialog">
  <p>これがダイアログです。</p>
  <button id="close-dialog-btn" class="sample-button">閉じる</button>
</dialog>

2. JavaScriptで表示・非表示を制御する

次に、ボタンがクリックされたときにダイアログを表示・非表示させるためのJavaScriptを記述します。

表示: showModal() メソッドを使います。これを実行すると、背景が操作できない「モーダルダイアログ」として表示されます。
非表示: close() メソッドを使います。

JavaScript
// 各要素を取得
const openBtn = document.getElementById('open-dialog-btn');
const closeBtn = document.getElementById('close-dialog-btn');
const dialog = document.getElementById('my-dialog');

// 「開くボタン」をクリックしたら、モーダルダイアログを表示
openBtn.addEventListener('click', () => {
  dialog.showModal();
});

// 「閉じるボタン」をクリックしたら、ダイアログを閉じる
closeBtn.addEventListener('click', () => {
  dialog.close();
});

これだけで、基本的なモーダルダイアログが完成です！ぜひ試してみてください。Escキーを押してもダイアログを閉じることができます。これはdialog要素の標準機能です。

3. 上記サンプルコードを使った実装例

上で紹介したコードを使うと下のようなモーダルダイアログを作ることができます。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

show() と showModal() の違い

dialog要素には、ダイアログを表示する方法が2つあります。show()とshowModal()です。この2つは似ているようで、挙動が大きく異なります。

・showModal()（モーダルダイアログ）

ダイアログ以外のページコンテンツは操作不能になります（背景が不活性化）。
ページの最前面に表示されます。
背景を暗したりするのに便利なCSSの::backdrop擬似要素が使えます。
Escキーで閉じることができます。
用途： ユーザーに操作を強制したい場合（確認、フォーム入力など）。

・show()（モードレスダイアログ）

ダイアログを表示したままでも、背景のコンテンツを操作可能です。
::backdrop擬似要素は適用されません。
Escキーで閉じられません（自分で実装する必要あり）。
用途： 補足情報を表示する場合（チャットウィンドウ、ツールパレットなど）。

ほとんどの場合、ユーザーに何らかのアクションを促す「モーダルダイアログ」として使いたいはずなので、基本的にはshowModal()を使うと覚えておけば良いでしょう。

【実践編】フォームを持つダイアログと値の受け取り

次に、もう少し実践的な例を見てみましょう。フォームを含むダイアログを作成し、開いたフォームの中でどの値が選択されたかを判別する方法です。

実装例

See the Pen
Untitled by saku (@web-saku)
on CodePen.

HTML

formタグのmethod属性に"dialog"を指定するのがポイントです。これにより、フォーム内のボタンがクリックされたときにダイアログが自動的に閉じ、ボタンのvalue属性がダイアログのreturnValueプロパティにセットされます。

HTML
<button id="form-dialog-open" class="sample-button">設定を開く</button>
<p>現在の設定: <span id="setting-value">未設定</span></p>

<dialog id="form-dialog" class="sample-dialog">
  <form method="dialog">
    <p>設定を選択してください。</p>
    <select name="setting">
      <option value="A">設定A</option>
      <option value="B">設定B</option>
      <option value="C">設定C</option>
    </select>
    <menu>
      <!-- value属性で戻り値を設定 -->
      <button class="sample-button" value="cancel">キャンセル</button>
      <button class="sample-button" type="submit" value="ok">OK</button>
    </menu>
  </form>
</dialog>

JavaScript

ダイアログが閉じたときに発生するcloseイベントを監視します。dialog.returnValueをチェックすることで、どのボタンが押されたかを判断できます。

JavaScript
const formDialogOpenBtn = document.getElementById('form-dialog-open');
const formDialog = document.getElementById('form-dialog');
const settingValueSpan = document.getElementById('setting-value');
const form = formDialog.querySelector('form');

// ダイアログを開く
formDialogOpenBtn.addEventListener('click', () => {
  formDialog.showModal();
});

// ダイアログが閉じたときのイベント
formDialog.addEventListener('close', () => {
  // returnValueが 'ok' の場合のみ値を更新
  if (formDialog.returnValue === 'ok') {
    // フォームの選択された値を取得して表示
    const selectedValue = form.setting.value;
    settingValueSpan.textContent = `「${selectedValue}」に設定されました`;
  } else {
    settingValueSpan.textContent = 'キャンセルされました';
  }
});

この仕組みを使えば、ユーザーの入力を受け取ってから処理を分岐させる、といったインタラクティブな機能を簡単に実装できます。

dialog要素のスタイリング（CSS）

dialog要素も通常のHTML要素と同じようにCSSで自由にスタイリングできます。
特に便利なのが、モーダル表示時の背景を装飾する::backdrop擬似要素です。

ダイアログ本体のスタイル

角を丸くしたり、影をつけたりして、モダンなデザインにしてみましょう。

CSS
dialog {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  padding: 2em;
  min-width: 400px;
}

背景（オーバーレイ）のスタイル ::backdrop

showModal()で表示したときの背景は::backdropでスタイルを指定できます。半透明の黒にするのが一般的です。

CSS
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  /* 背景にブラーをかけることも可能 */
  backdrop-filter: blur(3px);
}

::backdropを使うことで、わざわざ背景用のdivタグを用意する必要がなくなり、HTML構造がクリーンに保てます。

まとめ

今回は、HTMLのdialog要素について解説しました。

dialog要素で、モーダルウィンドウやポップアップをセマンティックに記述できる。
JavaScriptのshowModal()やclose()を使って簡単に表示・非表示を制御できる。
標準でアクセシビリティに優れており（フォーカストラップ、Escキーでのクローズ）、誰にとっても使いやすい。
CSSの::backdrop擬似要素を使えば、背景のオーバーレイも簡単にスタイリングできる。

これまでJavaScriptライブラリに頼っていたダイアログ実装も、HTMLネイティブのdialog要素を使えば、よりシンプルに、より高速に、そしてよりアクセシブルに実現できます。ぜひ、あなたの次のプロジェクトで活用してみてください！

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。