🔖

コードを短く綺麗に書くヒントHTML編　<details>

に公開
CSS
HTML
tech

HTML5の<details>って？

恥ずかしながら<details>の存在を認識できていませんでした。
タグの意味は「詳細折りたたみ要素」でsummaryタグを利用することで任意の概要やラベルを表示させることができます。
open属性が利用できて、JavaScriptで開閉を操作することも可能です。

ただ、IEは対応していないのでIEへのブラウザ対応を捨てられる場合のみ積極的に使っていきたいですね。

ブラウザ対応状況

対応状況詳細

実際のコード

<details>
    <summary>ほげほげ</summary>
    ここには詳細を説明するテキストが入ります。
</details>

実際の表示（閉じてる時）

実際の表示（開いてる時）

ちなみに<summary>を記述しないとラベルの箇所が「詳細」と表示されます。

CSSでカスタマイズ

CSSでカスタマイズすることも可能なようです。

  • 矢印のカスタマイズ
  • ホバー時のスタイル
  • オープン時のスタイル

矢印のカスタマイズ

/* Chrome、Safari以外 */
summary {
  display: block;
}

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

safariと　Chrome以外ではsummaryがdisplay: list-itemとなることで矢印が表示されているようなのでそれを上書きすれば消えます。

あとは、::beforeや::afterを利用し好きなようにカスタマイズできます。

ホバー時のスタイル

summary要素に対して擬似クラス:hoverを利用することで指定可能です。

summary:hover {
  /* プロパティを定義 */
}

オープン時のスタイル

details[open]で開いている時のスタイルを定義できます。
CSSでアニメーションを付与することも可能です。

details[open]　{
  /* プロパティを定義 */
}

details[open]　summary{
  /* プロパティを定義 */
}

Discussion