CSSアコーディオン：２  <details>/<summary>

デモ

標準の <details>/<summary> 要素を使用して、 JavaScriptに依存しない アコーディオンを実装しています。タイトルをクリックすると開閉ができます

タイトル：１

ここにコンテンツが入ります

  • リスト：1
  • リスト：2
  • リスト：3
タイトル：２

このアコーディオンは、上のアコーディオンとは独立して開閉します。

JavaScriptを使わずに実現しています。

CSS


/* アコーディオン全体（details要素）のスタイル */
details {
  border: 1px solid #6699ff; /* ボーダーはsummaryではなくdetails全体に適用 */
  background-color: #f4f8ff;
  max-width: 400px;
  margin: 20px 0;
}

/* 開閉のトリガーとなる見出し（summary要素）のスタイル */
summary {
  cursor: pointer;
  display: block; /* contentをブロック要素として扱う */
  padding: 10px 0;
  font-weight: bold;
  list-style: none; /* デフォルトの三角マークを非表示にする */
}

/* list-style: none; を使った後、一部ブラウザで残る空白や記号を非表示 */
summary::-webkit-details-marker,
summary::marker {
  display: none;
}

/* 閉じた状態の記号 (∨ を使用) */
summary:before {
  content: '∨';
  margin-right: 9.5px;
  color: #3333ff;
  margin-left: 10px;
}

/* 開いた状態の記号 (∧ を使用) */
details[open] > summary:before {
  content: '∧';
}

/* コンテンツ部分のスタイル */
.accordion-content {
  padding: 10px 20px 10px 30px;
  border-top: 1px solid #6699ff; /* 開いたときにボーダーを追加 */
  background-color: #fff;
}

HTML


<details>
  <summary>タイトル：１</summary>
  <div class="accordion-content">
    <p>ここにコンテンツが入ります</p>
    <ul>
      <li>リスト：1</li>
      <li>リスト：2</li>
      <li>リスト：3</li>
    </ul>
  </div>
</details>

<details>
  <summary>タイトル：２</summary>
  <div class="accordion-content">
    <p>このアコーディオンは、上のアコーディオンとは独立して開閉します。</p>
    <p>JavaScriptを使わずに実現しています。</p>
  </div>
</details>

回転アイコンに適した記号

回転によって方向を明確に変えられる記号
> (より大きい)：初期状態で右向きに見えるため、rotate(90deg) で下向き、rotate(270deg) または rotate(-90deg) で上向きにできます。
<(より小さい)：初期状態で左向きに見えるため、rotate(-90deg) で下向き、rotate(90deg) で上向きにできます。
∧(ハット記号)：最初から上向きの三角として使えますが、ほとんどのフォントで細いため、border で描画する方がきれいです。
▶(黒塗り右向き三角形)：> よりも視認性が高く、rotate() で上向きや下向きに簡単に変えられます。
プラス・マイナス系メニューの展開・格納
+(プラス)：閉じた状態（content: '+'）ではそのまま、開いた状態では transform: rotate(45deg); を適用して「×」のマークに見せることができます。また、デモでは開閉時に content を切り替えて + から ー にするデモも示しています。

回転アイコン動作デモ (JavaScriptなし)

各記号をクリックすると、説明通りの回転が適用されるか確認できます。

>

初期: 右向き → 開状態: 下向き (90deg)

>

初期: 右向き → 開状態: 上向き (-90deg)

<

初期: 左向き → 開状態: 下向き (-90deg)

<

初期: 左向き → 開状態: 上向き (90deg)

▶

初期: 右向き → 開状態: 下向き (90deg)

▶

初期: 右向き → 開状態: 上向き (270deg)

+

初期: プラス → 開状態: バツ (×) (45deg)

初期: プラス → 開状態: マイナス (content切り替え)

★ このページのコードは、Geminiの協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る