details・summaryタグとは

基本的な構造

<details>
  <summary>クリックして詳細を表示</summary>
  <p>ここに詳細な内容が表示されます。</p>
</details>
Copy

基本的な使い方

<details>
  <summary>よくある質問1</summary>
  <p>回答内容がここに表示されます。JavaScriptを使わずに、HTMLだけでアコーディオンが実現できます。</p>
</details>

<details>
  <summary>よくある質問2</summary>
  <p>別の質問に対する回答です。複数のdetailsタグを並べることで、FAQのような形式も簡単に作れます。</p>
</details>
Copy

CSSでスタイリング

基本的なスタイリング

details {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 0;
}

summary {
  background-color: #f8f9fa;
  padding: 16px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}

summary:hover {
  background-color: #e9ecef;
}

details[open] summary {
  border-bottom: 1px solid #ddd;
  border-radius: 8px 8px 0 0;
}

details > *:not(summary) {
  padding: 16px;
}
Copy

矢印アイコンのカスタマイズ

summary {
  list-style: none;
  position: relative;
  padding-right: 40px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  transition: transform 0.3s ease;
}

details[open] summary::after {
  content: '-';
  transform: translateY(-50%) rotate(180deg);
}
Copy

アニメーション付きアコーディオン

details {
  overflow: hidden;
  transition: height 0.3s ease;
}

details > *:not(summary) {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

details[open] > *:not(summary) {
  opacity: 1;
  transform: translateY(0);
}
Copy

実用的な使用例

FAQページ

<section class="faq">
  <h2>よくある質問</h2>
  
  <details>
    <summary>アカウントの作成方法を教えてください</summary>
    <p>トップページの「新規登録」ボタンをクリックし、必要事項を入力してください。メール認証が完了するとアカウントが有効になります。</p>
  </details>
  
  <details>
    <summary>パスワードを忘れた場合はどうすればよいですか</summary>
    <p>ログイン画面の「パスワードを忘れた方はこちら」リンクから、パスワードリセットの手続きを行ってください。</p>
  </details>
</section>
Copy

属性とオプション

open属性

<details open>
  <summary>最初から開いているアコーディオン</summary>
  <p>このコンテンツは最初から表示されています。</p>
</details>
Copy

JavaScript連携

// 開く
document.querySelector('details').open = true;

// 閉じる
document.querySelector('details').open = false;

// 開閉状態を監視
document.querySelector('details').addEventListener('toggle', function(e) {
  console.log('アコーディオンが' + (e.target.open ? '開かれ' : '閉じられ') + 'ました');
});
Copy

ブラウザサポート

• Chrome: 12+
• Firefox: 49+
• Safari: 6+
• Edge: 79+
• iOS Safari: 6+
• Android Browser: 4+

メリット・デメリット

メリット

• JavaScriptが不要でシンプル
• アクセシビリティに優れている（スクリーンリーダー対応）
• 軽量でパフォーマンスが良い
• ブラウザネイティブの動作

デメリット

• 複雑なアニメーションには限界がある
• 古いブラウザでは対応していない
• デザインの自由度がJavaScript実装より劣る場合がある

まとめ