🔖

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

2021/09/28に公開

HTML5の`<details>`って？

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

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

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

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

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

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

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{
  /* プロパティを定義 */
}