その他のタグ

本章では、新しく導入された標準のタグについて説明します。

<dialog>

基本用法

<dialog>タグは、閉じることができるダイアログボックスを表します。

<dialog>
  Hello world
</dialog>

上記は最もシンプルなダイアログボックスです。

デフォルトでは、ダイアログボックスは非表示で、ウェブページに表示されません。ダイアログボックスを表示させるには、open属性を追加する必要があります。

<dialog open>
  Hello world
</dialog>

上記のコードは、ウェブページにHello worldという内容のボックスを表示します。

<dialog>要素の中には、他のHTML要素を含めることができます。

<dialog open>
  <form method="dialog">
    <input type="text">
    <button type="submit" value="foo">提出</button>
  </form>
</dialog>

上記のダイアログボックスには、入力フィールドと送信ボタンがあります。

注意点として、上記の例では<form>のmethod属性をdialogに設定しています。この場合、送信ボタンをクリックするとダイアログボックスが消えます。しかし、フォームはサーバーに送信されず、ブラウザはフォーム要素のreturnValue属性を送信ボタンのvalue属性（上記の例ではfoo）に設定します。

JavaScript API

<dialog>要素のJavaScript APIは、ダイアログボックスを開閉するためのDialog.showModal()とDialog.close()の2つのメソッドを提供します。

const modal = document.querySelector('dialog');

// ダイアログボックスを表示する（open属性を追加するのと同等）
modal.showModal();

// ダイアログボックスを閉じる（open属性を削除するのと同等）
modal.close();

開発者は、閉じるボタンを提供し、それを呼び出してDialog.close()メソッドを使ってダイアログボックスを閉じることができます。

Dialog.close()メソッドは、情報を渡すために文字列を引数として受け取ることができます。<dialog>インターフェースのreturnValue属性はこの文字列を読み取ることができ、それ以外の場合はreturnValue属性は送信ボタンのvalue属性に等しくなります。

modal.close('Accepted');
modal.returnValue // "Accepted"

Dialog.showModal()メソッドがダイアログボックスを呼び出すと、透明なレイヤーが表示され、ユーザーがダイアログボックスの外の内容と対話できないようになります。CSSは、ダイアログ要素の::backdrop擬似クラスを提供しており、この透明なレイヤーを選択することができるため、透明なレイヤーを可視化するスタイルを記述することができます。

dialog {
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 1em black;
}

dialog::backdrop {
  /* 背景を半透明の黒にする */
  background-color: rgba(0, 0, 0, 0.4);
}

上記のコードは、<dialog>にスタイルを指定するだけでなく、ダイアログボックスの透明なレイヤーを灰色の半透明にしています。

<dialog>要素には、ダイアログボックスを呼び出すDialog.show()メソッドもあり、透明なレイヤーはなく、ユーザーがダイアログボックスの外の内容と対話できます。

事件

<dialog>要素には、リスンできる2つのイベントがあります。

• close：ダイアログボックスが閉じるときにトリガーされます。
• cancel：ユーザーがescキーを押してダイアログボックスを閉じるときにトリガーされます。

ユーザーが透明なレイヤーをクリックしてダイアログボックスを閉じるようにしたい場合、以下のコードを使用できます。

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

<details>、<summary>

基本用法

<details>タグは内容を折りたたむために使用され、ブラウザはそのタグの内容を折りたたんで表示します。

<details>
これが説明文です。
</details>

上記のコードは、ブラウザで折りたたまれて表示され、Detailsの前に三角形が表示されます。

▶ Details

ユーザーがこのテキストをクリックすると、折りたたまれたテキストが展開され、詳細な内容が表示されます。

▼ Details
これが説明文です。

再度クリックすると、展開されたテキストは再び折りたたまれます。

<details>タグのopen属性は、デフォルトで折りたたみを開くために使用されます。

<details open>
これが説明文です。
</details>

上記のコードは、デフォルトで折りたたみを開きます。

<summary>タグは、折りたたみ内容のタイトルをカスタマイズするために使用されます。

<details>
  <summary>これがタイトルです</summary>
  これが説明文です。
</details>

上記のコードの表示結果は以下のようになります。

▶ これがタイトルです

クリックすると、表示される効果は以下の通りです。

▼ これがタイトルです
これが説明文です。

CSSでsummary::-webkit-details-markerを設定することで、タイトルの前の三角矢印を変更できます。

summary::-webkit-details-marker {
  background: url(https://example.com/foo.svg);
  color: transparent;
}

以下のスタイルは、矢印を置き換える別の方法です。

summary::-webkit-details-marker {
  display: none;
}
summary:before {
  content: "\2714";
  color: #696f7c;
  margin-right: 5px;
}

JavaScript API

Details要素のopen属性は、現在の<details>が開いているか閉じているかを返します。

const details = document.querySelector('details');

if (details.open === true) {
  // 展開状態
} else {
  // 折りたたみ状態
}

Details要素にはtoggleイベントがあり、折りたたみを開閉する際にこのイベントがトリガーされます。

details.addEventListener('toggle', event => {
  if (details.open) {
    /* 展開状態 */
  } else {
    /* 折りたたみ状態 */
  }
});

参考リンク

• Meet the New Dialog Element、Keith J. Grant
• The dialog element: The way to create tomorrow’s modal windows、Abhishek Jakhar
• Details/Summary is the Easiest Way Ever to Make an Accordion、Chris Coyier