―HTML

【HTML】アコーディオンを4行で実装できるdetailsとsummaryタグの使い方

2024.09.14

2024.10.04

HTML

detailsとsummaryタグとは？
detailsとsummaryタグの使い方
通常のアコーディオンとの比較
まとめ
参考文献

`details`と`summary`タグとは？

HTMLの<details>と<summary>タグは、よく利用されるUIコンポーネントである「アコーディオン」を簡単に実装するために使われます。JavaScriptを使用せずに、クリックで内容を展開・折りたたむことができ、アクセスビリティやSEO面でも優れた効果を発揮します。本記事では、このタグの基本的な使い方と活用方法について詳しく解説します。

`details`と`summary`タグの使い方

基本的な使い方と構文解説

<details> タグ内に <summary> タグと他のHTML要素（例：<p>タグ）を含めることで、シンプルなアコーディオンが作成できます。例えば、以下のような構文です。
これにより、ユーザーは「タイトル」をクリックすることで詳細な内容を表示・非表示にすることができます。

HTML

<div>
  <details>
    <summary>アコーディオン1</summary>
    <p>テストテストテストテストテストテストテストテスト</p>
  </details>
  <details >
    <summary>アコーディオン2</summary>
    <p>テストテストテストテストテストテストテストテスト</p>
  </details>
  <details >
    <summary>アコーディオン3</summary>
    <p>テストテストテストテストテストテストテストテスト</p>
  </details>
</div>

属性を使用した応用例

open属性

<details> タグに open 属性を追加することで、ページ読み込み時にアコーディオンが最初から開いた状態で表示されます。

name属性

複数の<details>タグをグループ化するために name 属性を使用することができます。同じ name 属性を持つアコーディオンが一つ開いている時に、別のアコーディオンをクリックすると、前のものが自動的に閉じます。これにより、UIの一貫性が保たれます。

HTML

<details name="acc">
  <summary>アコーディオン1</summary>
  <p>テストテストテストテストテストテストテストテスト</p>
</details>
<details name="acc">
  <summary>アコーディオン2</summary>
  <p>テストテストテストテストテストテストテストテスト</p>
</details>
<details name="acc">
  <summary>アコーディオン3</summary>
  <p>テストテストテストテストテストテストテストテスト</p>
</details>

CSSによる調整の例

CSSを使うことで、<details> タグのデザインやレイアウトを柔軟に調整することができます。以下は、CSSを用いた簡単なレイアウト調整の例です。
これにより、ユーザーがアコーディオンを開いた際にタイトルの色を変更するなど、スタイルを整えることができます。

HTML

<div>
  <details name="acc">
    <summary>アコーディオン1</summary>
    <p>テストテストテストテストテストテストテストテスト</p>
  </details>
  <details name="acc">
    <summary>アコーディオン2</summary>
    <p>テストテストテストテストテストテストテストテスト</p>
  </details>
  <details name="acc">
    <summary>アコーディオン3</summary>
    <p>テストテストテストテストテストテストテストテスト</p>
  </details>
</div>
<style>
  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 800px;
  }
  details {
    border: 2px solid;
    border-image: linear-gradient(to right, #ff8c00 0%, #ff0080 100%) 1;
    margin-bottom: 5px;
    width: 300px;
    &[open] {
      summary {
        &::after {
          transform: rotate(180deg);
          top: calc(50% - 9px);
        }
      }
      p {
        animation: fadeIn 0.3s ease forwards;  
      }
    }
    p {
      padding: 10px;
      margin: 0;
      opacity: 0;
    }
  }
  @keyframes fadeIn {
    0% {
      transform: translateY(-10px);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  summary {
    display: block;
    position: relative;
    text-align: center;
    line-height: 3.3;
    height: 50px;
    padding-inline: 10px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to right, #ff8c00, #ff0080);
    cursor: pointer;
    transition: 0.3s opacity;
    &:hover {
      opacity: 0.7;
    }
  }
  summary::after {
    position: absolute;
    content: "";
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 15px solid #fff;
    top: calc(50% - 5px);
    right: 10px;
    transition: 0.3s all;
  }
</style>

通常のアコーディオンとの比較

メリット

・実装が簡単
JavaScriptなしでアコーディオン機能を実現でき、コードが軽量化されます。

・アクセシビリティの高さ
<details> タグはHTML5に準拠しており、スクリーンリーダーなどの支援技術に対応しているため、視覚障害者の方にも使いやすいです。

・SEOに有利
<details> 内のコンテンツは初期状態で非表示になっているものの、検索エンジンには読み込まれ、インデックス化されます。一方、JavaScriptで制御されたコンテンツは、検索エンジンにインデックスされない可能性があるため、SEO面で不利になる場合があります。

・パフォーマンス面
JavaScriptを使用しないため、ページの読み込み速度が向上し、特にモバイルユーザーにとってパフォーマンスのメリットが大きいです。

デメリット

・カスタマイズ性の限界
高度なアニメーションや複雑なインタラクションを実装するには、JavaScriptが必要です。CSSだけではカスタマイズの自由度が制限される場合があります。

まとめ

<details> と <summary> タグは、シンプルで軽量なアコーディオンの実装に最適です。SEOやアクセシビリティにも強いため、標準的なUIを実現したい場合におすすめです。ただし、複雑なカスタマイズやアニメーションが必要な場合は、JavaScriptによるアコーディオン実装をした方が良いと思います。