dialog 要素 (HTMLタグ)

ダイアログ

2018年07月08日

HTMLのdialog要素の説明です。dialog要素は、閲覧者が操作可能なダイアログを定義する要素です。


目次

  1. 要素の記述例
  2. 要素の説明
  3. 利用できる属性
  4. ブラウザデフォルトCSS設定

要素の記述例

dialog要素の記述例
<dialog id="dialog" open>
  <h1>タイトル</h1>
  <p>本文</p>
  <div><input type=button onclick="document.getElementById('dialog').close();" value="閉じる"></div>
</dialog>

 

閲覧中ブラウザーでの表示結果

 

要素の説明

  • dialog要素は、閲覧者が操作可能なダイアログを定義する要素です。

 

利用できる属性

dialog要素で利用できる属性
属性名 属性の説明
open 要素内容の表示・非表示状態を定義する[link-html-ref-format_bool]です。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

dialog要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

dialog要素のブラウザデフォルトCSS
dialog {
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  width: -webkit-fit-content;
  height: -webkit-fit-content;
  color: black;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background: white;
}
dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

 

 

 

Programming Style