BLOG

ブログ

programming

2026.02.18

【初心者向け】アクセシビリティ対応にも最適！
details要素の基本と活用例

こんにちは、ティウェブの長尾です。

WebサイトのFAQでよく見かけるアコーディオン形式は、質問をクリックすると回答が表示される便利な仕組みですが、「検索しても内容が見つからない」「ページ内検索でヒットしない」といった経験はありませんか？

これは、JavaScriptやCSSによってコンテンツが非表示になっているため、検索エンジンやブラウザのページ内検索がその内容を認識しづらいことが原因の一つです。

そこで注目したいのが、HTML5で導入された details 要素と summary 要素です。見た目のアコーディオン機能はそのままに、アクセシビリティや検索性の課題を解消できます。

今回は、特別なスクリプトを使わずに実装できる details 要素と summary 要素の基本的な使い方についてご紹介します。

details要素とsummary要素とは？

details（詳細）要素は、折りたたみ可能なコンテンツ全体を囲むためのタグで、summary要素とセットで使うことで、クリックで開閉できる折りたたみ式のコンテンツを、JavaScriptなしで実装出来ます。

summary（概要）要素は、ユーザーがクリックする折りたたみ部分のラベルとして表示されるタグです。コンテンツの意味や構造の点においても正しい情報を伝えることができます。

アクセシビリティに配慮

■ キーボード操作で開閉ができる

<details>要素と<summary>要素は、キーボードで操作できるようになっています。
アコーディオンメニューにTabキーでフォーカスを当て、Enterキーやスペースキーで開閉することができます。
これは、スクリーンリーダーを使う視覚障害者の方だけでなく、マウス操作が難しい方にも大きな配慮となります。

■ スクリーンリーダーで開閉状態を確認できる

スクリーンリーダーとは、Webページのテキストを音声で読み上げてくれる支援技術です。 <details>要素を使うと、この読み上げに「開いている／閉じている」状態が伝わるようになります。

■ 折りたたまれているコンテンツの内容も検索の対象になる

<details>要素を使うメリットのひとつに、「非表示のコンテンツも検索対象になる」という点があります。
これは、CSSのdisplay: noneなどで要素を隠してしまう場合と異なり、DOM上には存在し、構造的にもマークアップされているためです。
たとえば、FAQページなどで<details>要素を使っておけば、質問内容に含まれたキーワードで検索した際に、その答えが展開された状態で表示されます。

基本的な使い方と実装例

■ 基本的なマークアップ

HTML

<details>
　<summary>概要</summary>
    詳細
</details>

<details>要素がアコーディオンの詳細内容、<summary>要素が見出しとなり、クリックすると内容が表示されます。

概要

詳細

■ アコーディオンを開いた状態で表示する

HTML

<details open>
　<summary>概要</summary>
    詳細
</details>

<details>要素に、open属性を追加すると、開いた状態で表示できます。

概要

詳細

■ マウスポインタを変更する

マウスカーソルを当てたときのマウスポインタを変更します。

CSS

summary {
    cursor: pointer;
}

概要

詳細

■ 複数の要素をグループ化して、その中の一つだけ開くようにする

HTML

<details name="group">
　<summary>グループ ①</summary>
　　グループ ①の詳細
</details>
<details name="group">
　<summary>グループ ②</summary>
　　グループ ②の詳細
</details>
<details name="group">
　<summary>グループ ③</summary>
　　グループ ③の詳細
</details>

<details>要素に、同じ値のname属性を追加します。これにより、クリックしたグループだけが開きます。

グループ ①

グループ ①の詳細

グループ ②

グループ ②の詳細

グループ ③

グループ ③の詳細

■ 見出し横の ▶ を変更する

<summary>要素は、デフォルトのままだとdisplay: list-itemが適用され、::marker疑似要素の ▶ のマークが表示されます。CSSで変更してみましょう。

HTML

    <details name="group">
      <summary>アコーディオン ①<span class="icon"></span></summary>
      <p>アコーディオン ①の詳細</p>
    </details>
    <details name="group">
      <summary>アコーディオン ②<span class="icon"></span></summary>
      <p>アコーディオン ②の詳細</p>
    </details>
    <details name="group">
      <summary>アコーディオン ③<span class="icon"></span></summary>
      <p>アコーディオン ③の詳細</p>
    </details>

CSS

summary {
    display: block; /* 三角アイコンを消す */
    position: relative;
    cursor: pointer; /* マウスポインタを変更 */
}

/* SafariなどのWebKitベースのブラウザで表示される
三角アイコンの非表示対応 */
summary::-webkit-details-marker { 
    display: none;
}
details summary .icon {
    position: absolute;
    top: 17px;
    right: 20px;
    width: 16px;
    height: 16px;
    transition: 0.5s;
}
summary .icon::before,
summary .icon::after {
    position: absolute;
    content: "";
    background: #265bb2;
}
details summary .icon::after {
    top: 6px;
    right: 0;
    width: 16px;
    height: 4px;
}
details summary .icon::before {
    top: 0;
    right: 6px;
    width: 4px;
    height: 16px;
    opacity: 1;
}
details[open] summary .icon {
    transform: rotate(180deg);
}
details[open] summary .icon::before {
    opacity: 0;
}

<summary>要素のdisplay:プロパティにlist-item以外の値（ここではblock）を指定すると、▶ が消えます。
また、SafariなどのWebKitベースのブラウザで表示されている ▶ アイコンを非表示にするために、-webkit-details-marker｛ display: none; }を指定しています。
アイコン用に<span>要素を追加して、::before::after疑似要素にアニメーションを加えています。

アコーディオン ①

アコーディオン ①の詳細

アコーディオン ②

アコーディオン ②の詳細

アコーディオン ③

アコーディオン ③の詳細

■ 開閉にアニメーションをつける

アコーディオンを開くときに、スライドダウンするような動きをCSSで加えます。

HTML

    <details name="group">
      <summary>アコーディオン ①<span class="icon"></span></summary>
      <p>アコーディオン ①の詳細</p>
    </details>
    <details name="group">
      <summary>アコーディオン ②<span class="icon"></span></summary>
      <p>アコーディオン ②の詳細</p>
    </details>
    <details name="group">
      <summary>アコーディオン ③<span class="icon"></span></summary>
      <p>アコーディオン ③の詳細</p>
    </details>

CSS

details {
    height: 50px;
    overflow: hidden;
    transition: 0.5s;
}
details[open] {
    height: 100px;
}

<details>要素に高さを指定して、open属性の有無で数値を変更し、transitionで動きに変化をつけています。
この場合ですが、要素の内容によって高さが変わるため、表示が崩れる可能性があります。
::details-content疑似要素を使ってアニメーションを加える方法もありますが、対応しているブラウザに制限もありますので、今回は簡易的な方法をご紹介しました。

アコーディオン ①

アコーディオン ①の詳細

アコーディオン ②

アコーディオン ②の詳細

アコーディオン ③

アコーディオン ③の詳細

ブラウザの対応状況と注意点

■ details と summary の対応状況

details要素とsummary要素は HTML5 で導入され、現在ではほとんどのモダンブラウザでサポートされています。
▶ 対応ブラウザ：Details & Summary elements | Can I use…

一方で、::details-content疑似要素を使ったアニメーションは、details要素の開閉に応じて表示されるコンテンツ部分を対象とし、開閉時のスムーズなアニメーションや内容部分の装飾などに活用できますが、機能しないブラウザもあるため、デザインに影響が出る可能性があります。代替手段を用意するか、限られた用途での使用をおすすめします。

▶ ::details-content 疑似要素について：::details-content – CSS | MDN
▶ 対応ブラウザ：details-content | Can I use…