Details

クリックでコンテンツを開閉できるアコーディオンUIをdetails/summary要素で作成できるUIコンポーネントです。

Accordionとは違い、jsを使わずCSSだけでの実装となっています。

Overview

↓

Preview

Details Title

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

<Details.Root>
  <Details.Summary>
    <Details.Title>Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content>
    <DummyText length="l" />
  </Details.Content>
</Details.Root>

<details class="b--details">
  <summary class="b--details_summary">
    <span class="b--details_title">Details Title</span>
    <span class="b--details_icon a--icon" aria-hidden="true"></span>
  </summary>
  <div class="b--details_body">
    <div class="b--details_content l--flow">
      ...Contents...
    </div>
  </div>
</details>

<Details.Root> の直下には、<Details.Summary>（開閉のトリガー）と <Details.Content>（開閉されるコンテンツ）を配置します。 <Details.Summary> の中身は、<Details.Title> と <Details.Icon> で構成します。

Styles

Details のベーススタイルは、以下のCSSで定義されています。

_style.css

/* ::details-content と grid-template-rows: 0fr → 1fr のトランジションでアニメーション */
@layer lism-block {
  .b--details {
    --duration: var(--acc-duration, 0.25s);
    --icon-scale: 1.1;
    --icon-transform: rotate(0deg);
    --_contentGtr: 0fr;
  }
  .b--details[open] {
    --icon-transform: scaleY(-1);
    --_contentGtr: 1fr;
  }

  /* display: flex により summary のデフォルトマーカー（display: list-item）も解除される */
  .b--details_summary {
    display: flex;
    gap: var(--s10);
    align-items: center;
    justify-content: space-between;
    padding: var(--s15);
  }

  /* Safariで表示されるデフォルトの三角形アイコンを削除 */
  .b--details_summary::-webkit-details-marker {
    display: none;
  }

  .b--details_icon {
    --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');
    display: inline-grid;
    background-color: currentColor;
    mask: var(--svg) no-repeat center center / contain;
    scale: var(--icon-scale);

    transition: transform var(--duration);
    transform: var(--icon-transform);
  }

  .b--details::details-content {
    display: grid;
    grid-template-rows: var(--_contentGtr);
    transition-duration: var(--duration);
    transition-property: content-visibility, grid-template;
    transition-behavior: allow-discrete;
  }

  /* コンテンツ内部のラッパー（grid-template-rows: 0frのアニメーションに必須） */
  .b--details_body {
    overflow: hidden;
  }

  .b--details_content {
    /* _body に padding を付けると閉じた時に余白が残るので _content に付ける */
    padding: var(--s15);
  }
}

ソースコード全体は GitHub で公開しています。

How to use

@lism-css/ui パッケージでDetails(b--details)として提供しています。

Import

import { Details } from '@lism-css/ui/react';

import { Details } from '@lism-css/ui/astro';

<link href="https://cdn.jsdelivr.net/npm/@lism-css/ui@0.30.0/dist/style.css" rel="stylesheet" />

以下のコンポーネントが利用できます。

<Details.Root>: ルート要素（details要素）
<Details.Summary>: 開閉のトリガー（summary要素）
<Details.Title>: summary内のタイトル（デフォルトは span）
<Details.Icon>: 開閉状態を示すアイコン（CSSで描画）
<Details.Content>: 開閉されるコンテンツ

Props

プロパティ	説明
`<Details.Root>` `open`	初期状態で展開します（`details`要素の`open`属性）
`<Details.Root>` `--duration`	展開アニメーションの秒数
`<Details.Title>` `as`	summary要素内のタイトルを出力するHTMLタグの種類。見出しタグなどを指定すると `set--plain` が付与されます

Examples

スタイリング例

↓

Preview

Details Title

<Details.Root bd>
  <Details.Summary p="20" hov={{bgc:"base-2"}}>
    <Details.Title>Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content p="20" pt="15">
    <DummyText length="l" />
  </Details.Content>
</Details.Root>

<details class="b--details -bd">
  <summary class="b--details_summary -p:20 -hov:-bgc" style="--hov-bgc: var(--base-2)">
    <span class="b--details_title">Details Title</span>
    <span class="b--details_icon a--icon" aria-hidden="true"></span>
  </summary>
  <div class="b--details_body">
    <div class="b--details_content l--flow -p:20 -pt:15">
      <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.</p>
    </div>
  </div>
</details>

タイトルのHTMLタグを変更する

<Details.Title>はデフォルトではspanタグで出力されますが、asにh3などの見出しタグを指定することで、実際の見出し要素として出力できます。見出しタグを指定した場合は、set--plainが付与されてデフォルトの見出しスタイルがリセットされます。

↓

例

Details Title

<Details.Root bd>
  <Details.Summary>
    <Details.Title as="h3">Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  ...
</Details.Root>

<details class="b--details -bd">
  <summary class="b--details_summary">
    <h3 class="b--details_title set--plain">Details Title</h3>
    <span class="b--details_icon a--icon" aria-hidden="true"></span>
  </summary>
  ...
</details>

summary内の見出し要素について

「summary内に見出し要素を配置しても、スクリーンリーダーでロール検出ができない」という問題がありましたが、2026年現在、すでにモダンブラウザではほとんど解決しているようです。

複数同時展開を制限する

details/summaryの基本的な機能として、name属性を指定すると、同じnameのグループ内で同時に展開できる要素が一つのみになります。

↓

Preview

Details Title 1

Details Title 2

<Stack g="10">
  <Details.Root bd name="details-group-01">
    <Details.Summary>
      <Details.Title>Details Title 1</Details.Title>
      <Details.Icon />
    </Details.Summary>
    <Details.Content>
      <DummyText length="l" />
    </Details.Content>
  </Details.Root>
  <Details.Root bd name="details-group-01">...</Details.Root>
</Stack>

<div class="l--stack -g:10">
  <details class="b--details -bd" name="details-group-01">...</details>
  <details class="b--details -bd" name="details-group-01">...</details>
</div>

アニメーション時間を変更する

<Details>の開閉アニメーションの時間は--duration変数で管理しており、初期値は、<Accordion>と同じ--acc-durationになっています。

局所的な調整には --duration変数を調整し、全体的な調整には:rootで--acc-durationを上書きしてください。

↓

Preview

Details Title

<Details.Root bd style={{ '--duration': '.4s' }}>
  <Details.Summary>...</Details.Summary>
  <Details.Content>...</Details.Content>
</Details.Root>

<details class="b--details -bd" style="--duration: 0.4s">...</details>