HTML5新タグ<dialog>の使い方

  • 1255単語
  • 6分
  • 29 Jul, 2024

HTML5が<dialog>タグを導入する前、フロントエンドでモーダルダイアログを実現するのは非常に難しく、多くのCSSやJavaScriptを書く必要があり、さまざまな互換性の問題を考慮する必要がありました。以下はシンプルなデモの例です:

モーダルの模擬例コード

HTML 部分

1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>Custom Dialog Example</title>
7
<link rel="stylesheet" href="styles.css" />
8
</head>
9
<body>
10
<button id="showDialog">Show Dialog</button>
11
12
<div id="dialogOverlay" class="overlay"></div>
13
<div id="dialog" class="dialog">
14
<p>This is a custom dialog box.</p>
15
<button id="closeDialog">Close</button>
16
</div>
17
18
<script src="script.js"></script>
19
</body>
20
</html>

CSS 部分(styles.css)

1
/* ダイアログ用のオーバーレイ */
2
.overlay {
3
display: none;
4
position: fixed;
5
top: 0;
6
left: 0;
7
width: 100%;
8
height: 100%;
9
background: rgba(0, 0, 0, 0.5);
10
z-index: 10;
11
}
12
13
/* ダイアログボックスのスタイル */
14
.dialog {
15
display: none;
16
position: fixed;
17
top: 50%;
18
left: 50%;
19
transform: translate(-50%, -50%);
20
background: white;
21
padding: 20px;
22
border-radius: 8px;
23
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
24
z-index: 20;
25
}
26
27
/* ボタンのスタイル */
28
button {
29
margin-top: 20px;
30
padding: 10px 20px;
31
border: none;
32
background: #007bff;
33
color: white;
34
border-radius: 4px;
35
cursor: pointer;
36
}
37
38
button:hover {
39
background: #0056b3;
40
}

JavaScript 部分(script.js)

1
document.addEventListener("DOMContentLoaded", function () {
2
const showDialogButton = document.getElementById("showDialog");
3
const dialog = document.getElementById("dialog");
4
const dialogOverlay = document.getElementById("dialogOverlay");
5
const closeDialogButton = document.getElementById("closeDialog");
6
7
showDialogButton.addEventListener("click", function () {
8
dialogOverlay.style.display = "block";
9
dialog.style.display = "block";
10
});
11
12
closeDialogButton.addEventListener("click", function () {
13
dialogOverlay.style.display = "none";
14
dialog.style.display = "none";
15
});
16
17
dialogOverlay.addEventListener("click", function () {
18
dialogOverlay.style.display = "none";
19
dialog.style.display = "none";
20
});
21
});

解説

  1. HTML 部分

    • #showDialog ボタンがダイアログを表示するトリガーとなります。
    • #dialogOverlay はオーバーレイで、モーダル効果を提供し、背景のクリックを無効にします。
    • #dialog はダイアログの本体で、テキストと閉じるボタンが含まれています。
  2. CSS 部分

    • .overlay クラスはオーバーレイのスタイルを制御し、画面全体を覆い、半透明で表示します。
    • .dialog クラスはダイアログのスタイルを制御し、中央に表示され、一定のスタイルが適用されます。
    • button スタイルはボタンの外観を制御します。
  3. JavaScript 部分

    • DOMContentLoaded イベントをリスンし、DOMが完全に読み込まれた後にコードを実行します。
    • ダイアログ表示ボタンに click イベントリスナーを追加し、オーバーレイとダイアログの display スタイルを block に設定して表示します。
    • ダイアログ閉じるボタンとオーバーレイに click イベントリスナーを追加し、オーバーレイとダイアログの display スタイルを none に設定して非表示にします。

効果は次のとおりです:

html+css+jsによるモーダル効果

HTML5の推進者WHATWG(Web Hypertext Application Technology Working Group)は、標準化されたダイアログのニーズに気付きました。2013年、WHATWGは内蔵のダイアログ機能を提供する新しいHTML要素<dialog>を提案しました。その後、W3C(World Wide Web Consortium)も<dialog>要素をHTML標準に取り入れることを検討し始めました。この要素の初期規格はHTML Living Standardで定義され、HTML5.2規格に徐々に採用されました。最初に<dialog>要素をサポートしたブラウザはGoogle Chromeで、Chrome 37(2014年8月)からサポートされました。その他のブラウザ(Firefox、Safariなど)は、この要素のサポートが遅れていました。2023年現在、主要な現代ブラウザ(Chrome、Firefox、Edge、Safariなど)はすべて<dialog>要素をサポートしており、Web開発においてより一般的になっています。

<dialog>の基本的な使い方

  1. ダイアログの定義<dialog>タグを使用してダイアログを定義します。
  2. ダイアログの表示:JavaScriptを使用してダイアログを開いたり閉じたりします。

サンプルコード

1
<!doctype html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>Dialog Example</title>
7
<style>
8
/* ダイアログボックスのスタイル */
9
dialog {
10
border: none;
11
padding: 20px;
12
border-radius: 8px;
13
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
14
}
15
dialog::backdrop {
16
background-color: rgba(0, 0, 0, 0.5);
17
}
18
19
/* ボタンのスタイル */
20
button {
21
margin-top: 20px;
22
padding: 10px 20px;
23
border: none;
24
background: #007bff;
25
color: white;
26
border-radius: 4px;
27
cursor: pointer;
28
}
29
30
button:hover {
31
background: #0056b3;
32
}
33
</style>
34
</head>
35
<body>
36
<button id="showDialog">Show Dialog</button>
37
38
<dialog id="myDialog">
39
<p>This is a dialog box.</p>
40
<button id="closeDialog">Close</button>
41
</dialog>
42
43
<script>
44
const showDialogButton = document.getElementById("showDialog");
45
const dialog = document.getElementById("myDialog");
46
const closeDialogButton = document.getElementById("closeDialog");
47
48
showDialogButton.addEventListener("click", () => {
49
dialog.showModal();
50
});
51
52
closeDialogButton.addEventListener("click", () => {
53
dialog.close();
54
});
55
</script>
56
</body>
57
</html>

解説

  1. HTML 部分

    • <button id="showDialog">Show Dialog</button> ボタンがダイアログを表示するトリガーとなります。
    • <dialog id="myDialog"> がダイアログを定義し、その中にテキストとダイアログを閉じるためのボタンが含まれています。
  2. JavaScript 部分

    • getElementById メソッドでボタンとダイアログの参照を取得します。
    • ダイアログ表示ボタンに click イベントリスナーを追加し、イベントがトリガーされたときに dialog.showModal() メソッドを呼び出してダイアログを表示します。
    • ダイアログ閉じるボタンに click イベントリスナーを追加し、イベントがトリガーされたときに dialog.close() メソッドを呼び出してダイアログを閉じます。

効果は次のとおりです

dialogによるモーダル効果

モーダルと非モーダルダイアログ

  • dialog.showModal() メソッドはモーダルダイアログを表示します。これにより背景がクリックできなくなり、ダイアログを閉じるまで背景ページでの操作ができません。
  • dialog.show() メソッドは非モーダルダイアログを表示します。ユーザーは背景ページと引き続き対話できます。

スタイルのカスタマイズ

CSSを使用してダイアログの外観をカスタマイズできます。例えば:

1
<style>
2
dialog {
3
border: none;
4
border-radius: 8px;
5
padding: 20px;
6
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
7
}
8
dialog::backdrop {
9
background-color: rgba(0, 0, 0, 0.5);
10
}
11
</style>

この方法で、ダイアログはより美しく、ユーザーフレンドリーになります。

互換性

<dialog> タグは現代のブラウザで広くサポートされていますが、古いブラウザではサポートされていない場合があります。互換性サポートが必要な場合は、dialog-polyfill ライブラリを検討することができます。