🧳

details/summary要素を使ってみた

2024/06/01に公開

CSS

こんにちは！@Ryo54388667です!☺️

普段は都内でエンジニアとして業務をしてます！
主にTypeScriptやNext.jsといった技術を触っています。

今回はHTMLのdetails/summary要素を使ってみたので紹介します！

📌 details/summary要素の概要

ごちゃごちゃ説明するより見ていただいたほうが良いですよね！Zennでも利用されている下記のような要素です。

これがsummary要素のテキスト

details内の折り畳まれたコンテンツ
details内の折り畳まれたコンテンツ
details内の折り畳まれたコンテンツ

open/closeの状態をもち、open状態の時のみ情報を表示するような折りたたみウィジットです。
Details/summary 要素には多くのメリットがあります。特別なコードを書くことなく、状態をもつUIを作成できることもさることながら、アクセシビリティに対応している点も良きです。

個人的には、JavaScript無し(client依存の組み込み関数など) で、このUIを実現できることに大きなメリットを感じます。ReactのServer Componentsで記述できるので、設計の都合上、「ここClient Componentsにしたくないんだよなー。。」という場面で大いに役立つのかと思います。

📌 実装について

プレーンなCSSによる実装はWeb上に多く見受けられたので、今回は例として少なそうなTailwindCSSでスタイリングしていきます。

記事コンテンツの目次に利用した例
不可逆な折りたたみウィジットの例

記事コンテンツの目次に利用した例

作例

<details className="hover:bg-gray-50  transition duration-200 rounded-md hover:shadow-lg">
        <summary className="py-6 px-4 text-2xl  font-semibold w-full cursor-pointer marker:text-blue-500 ここにlist-noneを付与するとマーカー非表示にできる">目次</summary>
        <nav className="mx-12 pb-8" aria-label="目次">
          <ol className="space-y-2 list-decimal">
            <li className="group hover:text-blue-500 hover:marker:text-blue-500">
              <a href="#section1">セクション1</a>
            </li>
            <li className="group hover:text-blue-500 hover:marker:text-blue-500">
              <a href="#section2">セクション2</a>
            </li>
            <li className="group hover:text-blue-500 hover:marker:text-blue-500">
              <a href="#section3">セクション3</a>
            </li>
          </ol>
        </nav>
</details>

不可逆な折りたたみウィジットの例

一度押下するとページの更新をしない限り、表示されないようなもの。

        <ul className="divide-y divide-gray-300 gap-0 flex flex-col">
          {data.slice(0, 5).map(({ id, name }) => (
            <li key={id}>{name}</li>
          ))}
        </ul>
        <details className="group mt-0 cursor-pointer hover:bg-blue-200 hover:opacity-70 open:hover:bg-transparent  open:cursor-auto open:opacity-100">
          <summary className="list-none text-gray-400 group-open:hidden">その他のカテゴリ</summary>
          <ul className="border-t divide-y divide-gray-300 border-gray-300  flex gap-0 flex-col">
            {data.slice(5).map(({ id, name }) => (
              <li key={id}>{name}</li>
            ))}
          </ul>
        </details>

📌 まとめ

HTMLのdetails/summary要素の使用例

記事コンテンツの目次に利用した例
不可逆な折りたたみウィジットの例

より良い方法があれば教えてください〜

最後まで読んでいただきありがとうございます！
気ままにつぶやいているので、気軽にフォローをお願いします！🥺