Lism Tips

Details（開け閉めできる囲み）

Details は、HTML の details と summary で作る、押すと開け閉めできる囲みです。スクリプトを使わず CSS だけで動きます。HTML の形と Props をまとめています。

Details（ディテールズ）は、題名を押すと中身が開いたり閉じたりする囲みです。HTML の <details> と <summary> 要素で作るので、スクリプト（JavaScript）を使わず CSS だけで動きます。@lism-css/ui に入っています。

どんなときに使う？#

  • 補足の説明や長い例を、最初はたたんでおきたいとき
  • よくある質問を、スクリプトを読み込まずに開け閉めしたいとき

<div> と <button> で組み、スクリプトで開け閉めする部品が欲しいときは Accordion を使います。

使い方#

<details> に b--details、<summary> に b--details_summary を付けます。題名の横の印（b--details_icon）は、開くと上下が逆さになります。下の題名を押してみてください。

表示例

題名

開くと、この中身が見えます。

html
<details class="b--details -bd">
  <summary class="b--details_summary">
    <span class="b--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>開くと、この中身が見えます。</p>
    </div>
  </div>
</details>

<details> と <summary> は HTML にもともとある要素です。<summary> を押すと <details> に open という属性が付き、中身が見えるようになります。

部品の名前#

クラス 役目
b--details 全体（<details> 要素）
b--details_summary 押すところ（<summary> 要素）
b--details_title 題名（ふつうは <span>）
b--details_icon 開いているか閉じているかを示す印（CSS で描く）
b--details_body 開け閉めされる部分の外側の箱
b--details_content 余白を持つ中身の箱

ブラウザが最初から付ける三角の印は消してあります。

枠と余白を付ける#

Property Class を足して見た目を整えます。余白は、外側の b--details_body ではなく中の b--details_content に付けます（外側に付けると、閉じたときに余白だけが残るため）。

表示例

質問

答えです。

html
<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">質問</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>答えです。</p>
    </div>
  </div>
</details>

最初から開いておく#

<details> に open を付けます。

表示例

最初から開いている

読み込んだときから見えています。

html
<details class="b--details -bd" open>
  <summary class="b--details_summary">
    <span class="b--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>読み込んだときから見えています。</p>
    </div>
  </div>
</details>

1つだけ開くようにする#

<details> に同じ name を付けると、その仲間の中で開けるのは1つだけになります。これは HTML の <details> がもともと持っているはたらきです。1つを開くと、ほかは閉じます。

表示例

1つめ

1つめの中身です。

2つめ

2つめの中身です。

html
<div class="l--stack -g:10">
  <details class="b--details -bd" name="demo-details-group">
    <summary class="b--details_summary">
      <span class="b--details_title">1つめ</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>1つめの中身です。</p></div>
    </div>
  </details>
  <details class="b--details -bd" name="demo-details-group">
    <summary class="b--details_summary">
      <span class="b--details_title">2つめ</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>2つめの中身です。</p></div>
    </div>
  </details>
</div>

題名を見出しにする#

題名を <h3> などの見出しタグにできます。そのときは set--plain（タグが最初から持つ見た目を消すクラス）を付けます。

html
<summary class="b--details_summary">
  <h3 class="b--details_title set--plain">題名</h3>
  <span class="b--details_icon a--icon" aria-hidden="true"></span>
</summary>
注意

以前は、<summary> に入れた見出しを、画面を読み上げるソフトが見出しと分かってくれないことがありました。公式ドキュメントでは、2026年の新しいブラウザならほぼ心配ない、とされています。

開け閉めの速さを変える#

開け閉めにかかる時間は、変数 --duration で決まります。何もしなければ --acc-duration の値を使い、それも無ければ 0.25s です（Accordion も同じ変数を見ます）。この囲みだけ速さを変えたいときは --duration を書きます。サイトのすべての開け閉めをそろえて変えたいときは、:root に --acc-duration を書きます。

html
<details class="b--details -bd" style="--duration: 0.4s">...</details>
変数 意味 初期値
--duration 開け閉めの時間 var(--acc-duration, 0.25s)
--icon-scale 印の大きさの倍率 1.1
--icon-transform 印の向き（開くと scaleY(-1) で上下逆さ） rotate(0deg)

React・Astro で書く場合#

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

<Details.Root bd>
  <Details.Summary p="20">
    <Details.Title>題名</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content p="20" pt="15">
    <p>中身</p>
  </Details.Content>
</Details.Root>

Astro では @lism-css/ui/astro/Details から読み込みます。<Details.Root> のすぐ中に <Details.Summary> と <Details.Content> を置き、<Details.Summary> の中に <Details.Title> と <Details.Icon> を置きます。

コンポーネント 役目
<Details.Root> 全体（details 要素）
<Details.Summary> 押すところ（summary 要素）
<Details.Title> 題名（ふつうは span）
<Details.Icon> 開け閉めの印（CSS で描く）
<Details.Content> 開け閉めされる中身

Props#

Props 付ける場所 何をするか
open <Details.Root> 最初から開く（details 要素の open 属性）
--duration <Details.Root> 開け閉めの秒数
as <Details.Title> 題名のタグ。見出しタグなどにすると set--plain が付く

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧