html アコーディオン

HTMLでアコーディオン（クリックすると開閉するメニュー）を実装するには、<details>タグと<summary>タグを使用するのが最も簡単で、モダンな手法です。JavaScriptやCSSによる複雑な設定なしで、ブラウザ標準の機能として実装できます。

基本的な実装方法

HTML

<details>
  <summary>ここをクリックすると開きます</summary>
  <p>ここに詳細なコンテンツが入ります。テキストや画像、リンクなどを自由に配置可能です。</p>
</details>

よく使われるカスタマイズ例

1. 最初から開いた状態にする

detailsタグに open 属性を追加するだけで、ページ読み込み時に開いた状態になります。

HTML

<details open>
  <summary>最初から開いているアコーディオン</summary>
  <p>コンテンツ内容。</p>
</details>

2. CSSで見た目を整える

CSSを追加することで、開閉時の動きを滑らかにしたり、デザインを調整したりできます。

HTML

<style>
  details {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  
  summary {
    cursor: pointer;
    font-weight: bold;
    list-style: none; /* デフォルトの▲アイコンを消す */
  }

  /* 独自アイコンをつける場合 */
  summary::after {
    content: "▼";
    float: right;
  }
  details[open] summary::after {
    content: "▲";
  }
</style>

なぜこの方法が推奨されるのか

• アクセシビリティ: キーボード操作（TabキーやEnterキー）に標準で対応しており、スクリーンリーダーでも正しく認識されます。

• 軽量: JavaScriptを一行も書く必要がないため、ページの読み込み速度に影響を与えません。

• 互換性: 主要なブラウザすべてでサポートされています。

これよりも複雑なアニメーション（開閉時のスライド効果など）が必要な場合は、CSSの transition プロパティと組み合わせて実装するか、JavaScriptライブラリの検討が必要になります。まずはこの標準的な<details>タグで要件を満たせるか試してみてください。