コード部分を折りたたむ【detailsタグ】の使い方

長いCSSコードやPythonコードなどを折りたたんで隠したり、FAQのタイトルをクリックすれば解説が表示されたりするHTMLタグがディテイルズタグ「<details>〜</details>」。

Detailsタグの例

内容が折りたたまれて、隠されています。

<details> は2014年に正式導入されたHTML5のタグだが、現在ほぼ全てのブラウザで使うことができるらしい。積極的に使っていこうと思う。

昨年コードを折りたたみたいと調べたときはJavaScriptを使ったやつしか見つけられなかったのだが、私の検索技術が上がったのだろうか。とにかく忘れないうちにメモしておく。

detailsタグとは
使ってみようdetailsタグ
まとめ

detailsタグとは

detailsタグはHTMLで情報を簡潔にまとめる際に便利。

基本的な使用方法は、<details>と<summary>タグを組み合わせることです。<details>タグで囲まれた内容は通常、閉じられた状態で表示されますが、ユーザーがクリックすると内容が展開します。

<summary>タグはその隠された内容の見出しを提供し、どんな情報が隠されているかを示します。これにより、ページをすっきりと保ちつつ、必要な情報に簡単にアクセスできるようになります。

タグの構成は以下の通り。

<details>
- <summary>
  - タイトル部分
- </summary>
  - コード部分
</details>

<details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN

使ってみようdetailsタグ

detailsタグの書き方

せっかくなのでdetailsタグを、detailsタグを用いて書く。

DetailsタグのHTML

<details>
  <summary>Detailsタグ</summary>

<!-- 折りたたむ内容をここに書く -->

</details>

detailsタグの見た目を変えるCSS

現在本ブログで使用中のテーマのCSSはdetailsタグに対応していないようなので、上のリンク先のCSSを追加しておいた。

DetailsタグのCSS

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

ボタンっぽく改変しました。

上記のCSSだと文字が小さく囲みが細長い形でした。ボタンのように改変してみました。

DetailsタグのCSS（改変後）

/* Details タグ用 */

details {
  padding: 0;
  border: none; /* details自体のボーダーを消す */
}

summary {
  display: inline-block; /* インラインブロック要素として扱う */
  font-weight: bold;
  font-size: 150%;
  padding: 8px 16px; /* パディングを調整 */
  border: 1px solid #aaa; /* ボーダーを適用 */
  border-radius: 4px; /* 角を丸くする */
  background-color: white; /* 背景色を設定 */
}

details[open] summary {
  border-radius: 4px 4px 0 0; /* 開いた時の角丸を上だけにする */
  border-bottom: none; /* 下のボーダーを消す */
}

details[open] {
  border: 1px solid #aaa; /* 開いた時にdetails全体にボーダーを適用 */
  border-radius: 4px; /* 角を丸くする */
  padding: 16px; /* パディングを調整 */
  background-color: white; /* 背景色を設定 */
}