HTML「details」を使用して長いコードを簡単に折りたたむ方法

UX/UI design

大量に並ぶ折り畳み椅子

Cassandra Peterson — 写真はあくまでイメージです(๑′ᴗ‵๑)

HTMLの「details」タグを使用して、長いコードやテキスト部分を簡単に折りたたむ方法をいっしょに学びましょう。コーディングブログやカスタマイズに最適な、シンプルなアコーディオンメニューを作成できます。

複雑なJavaScriptやCSSは不要です。必要なのは「details」と「summary」タグのみです。タイトルは「summary」タグで簡単に設定し、内容は「details」タグ内に記述します。

「open」属性を追加することで、最初から展開された状態で表示することも可能です。この手法で、スタイリッシュなアコーディオンメニューを簡単に作成しましょう。

使用例

[ コードが閉じます ][ コードが開きます ]

解説

<details>
  <summary>
    <span class="open">コードが開きます</span>
    <span class="close">コードが閉じます</span>
  </summary>
  <li>折りたたむ内容</li>
  <li>折りたたむ内容</li>
  <li>折りたたむ内容</li>
</details>

details[open] .open {
  display: none ;
}

details:not([open]) .close {
  display: none ;
}

「details」タグを使用した折りたたみ機能の設定方法はシンプルで、必要なコードは「details」タグと「summary」タグの2つだけです。

上のコードはCSSも付けていますが、メッセージの出し分けに利用しているだけで開閉だけでしたらCSSも不要です。以下に要点をまとめます。

「details」タグと「summary」タグの使い方

「details」タグでコンテンツを囲みます。
「summary」タグでメニューのタイトルを設定します。
折りたたむ内容は「details」タグ内に記述します。

最初から開いた状態で表示する方法

「details」タグに「open」属性を追加します。
例えば、目次など最初から開いていたほうが読者にとってわかりやすく、スマートなデザインに利用できます。

以下が、開いた状態で表示されるコード例です。

    <details open>
    <summary>ここをクリックすれば折りたためます
    </summary>
    <li>折りたたむ内容
    </li>
    <li>折りたたむ内容
    </li>
    <li>折りたたむ内容
    </li>
</details>