details・summary要素のアコーディオン

概要

HTMLの標準要素である<details>と<summary>を使用したアコーディオンです。JavaScriptを使用せずに開閉機能を実現でき、セマンティックで軽量な実装が可能です。

<details>要素は、ユーザーが表示/非表示を切り替えられる開示ウィジェットを作成するHTML5の標準要素です。ブラウザサポートも充実しており、キーボード操作（Enter/Spaceキーで開閉）も組み込まれているため、実用的な選択肢として活用できます。

プレビュー

よくある質問: サービスの利用料金について

基本プランは月額1,980円からご利用いただけます。プランには以下の内容が含まれます：

基本機能の全て
24時間サポート
月間1000件までの処理
データのバックアップ機能

詳細な料金体系については、料金プランページをご確認ください。

利用開始までの流れ

アカウント登録（無料）
プラン選択と支払い方法の設定
初期設定の完了
サービス利用開始

登録からサービス開始まで、最短5分で完了します。

サポート体制について（初期状態で開いています）

お客様に安心してサービスをご利用いただくため、充実したサポート体制を整えています：

メールサポート: 24時間受付（平日は6時間以内に回答）
チャットサポート: 平日10:00-18:00
電話サポート: 緊急時対応（有料プランのみ）

HTML

基本的な使用方法

<details class="detailsAccordion">
  <summary class="detailsAccordion__summary">クリックして開閉</summary>
  <div class="detailsAccordion__content">
    <p>ここにコンテンツが入ります。</p>
    <p>複数の段落や、リスト、画像なども配置できます。</p>
  </div>
</details>

初期状態で開いておく場合

<details class="detailsAccordion" open>
  <summary class="detailsAccordion__summary">初期状態で開いています</summary>
  <div class="detailsAccordion__content">
    <p>open属性により、ページ読み込み時に開いた状態で表示されます。</p>
  </div>
</details>

CSS

※CSS Nestingを使用しています。

.detailsAccordion {
  --_border-color: oklch(85% 0.02 250);
  --_border-hover-color: oklch(70% 0.1 250);
  --_summary-bg: oklch(98% 0.02 250);
  --_summary-bg-hover: oklch(95% 0.05 250);
  --_summary-text-color: oklch(25% 0.1 250);
  --_content-bg: oklch(99% 0.01 250);
  --_content-text-color: oklch(20% 0.05 250);
  --_focus-outline: oklch(50% 0.2 250);
  --_transition-duration: 0.2s;

  border: 1px solid var(--_border-color);
  margin-block-end: 1em;
  overflow: hidden;
  transition: border-color var(--_transition-duration) ease;
  inline-size: 100%;

  &:hover {
    border-color: var(--_border-hover-color);
  }

  &:last-child {
    margin-block-end: 0;
  }
}

.detailsAccordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.5em;
  background-color: var(--_summary-bg);
  color: var(--_summary-text-color);
  font-weight: 600;
  font-size: 1em;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--_transition-duration) ease, box-shadow var(--_transition-duration) ease;
  list-style: none;

  /* デフォルトの三角印を非表示 */
  &::-webkit-details-marker {
    display: none;
  }

  /* カスタム矢印アイコンを追加 */
  &::after {
    content: "";
    inline-size: 0.5em;
    block-size: 0.5em;
    border: 2px solid currentColor;
    border-inline-start: none;
    border-block-start: none;
    transform: rotate(45deg);
    transition: transform var(--_transition-duration) ease;
    flex-shrink: 0;
    margin-inline-start: 1em;
  }

  &:hover {
    background-color: var(--_summary-bg-hover);
  }

  &:focus {
    outline: 2px solid var(--_focus-outline);
    outline-offset: -2px;
    background-color: var(--_summary-bg-hover);
    box-shadow: 0 0 0 3px oklch(50% 0.2 250 / 0.2);
  }

  &:focus-visible {
    outline: 2px solid var(--_focus-outline);
    outline-offset: -2px;
    background-color: var(--_summary-bg-hover);
    box-shadow: 0 0 0 3px oklch(50% 0.2 250 / 0.2);
  }
}

/* 開いている時の矢印を上向きに */
.detailsAccordion[open] .detailsAccordion__summary::after {
  transform: rotate(-135deg);
}

.detailsAccordion__content {
  padding: 1.5em;
  background-color: var(--_content-bg);
  color: var(--_content-text-color);
  line-height: 1.7;
}

使用上の注意点

ブラウザサポート

モダンブラウザでは広くサポートされています（IE除く）
古いブラウザでは開いたままの状態で表示されます（フォールバック動作）

開閉アニメーション

標準のdetails要素は開閉アニメーションに制限があります
スムーズなアニメーションが必要な場合は、JavaScriptと組み合わせた実装を検討してください

SEO考慮事項

コンテンツは初期状態で非表示でも検索エンジンにインデックスされます
重要な情報を含む場合、open属性で初期表示を検討してください

概要