HTML Living Standard/summary

SUMMARY要素

<summary>要素は、<details>要素の直下に配置され、その内容を要約として表示します。ユーザーがクリックすると、<details>内の詳細情報を開閉できます。

定義

<summary>要素は、<details>要素の見出しまたはタイトルを定義します。
<summary>要素のテキストは、クリック可能なインターフェイスを提供します。

使用方法

基本例

<details>
  <summary>詳細を表示</summary>
  <p>これは詳細情報です。</p>
</details>

この例では、「詳細を表示」がクリック可能なタイトルとして表示されます。

複数行の内容

<summary>内に複雑な内容を含めることも可能です。

<details>
  <summary>
    <strong>タイトル:</strong> 詳細情報
    <br>
    <span>クリックして開閉</span>
  </summary>
  <p>ここに追加の情報が表示されます。</p>
</details>

この場合、<summary>はスタイリングや複数行の構造に対応可能です。

属性

<summary>要素には、特定の専用属性はありませんが、グローバル属性を使用できます。

id: ユニークな識別子を設定します。
class: CSSでのスタイリングに使用されます。
style: インラインスタイルを指定します。

<details>
  <summary id="info-summary" class="custom-summary" style="color: blue;">クリックしてください</summary>
  <p>これは詳細です。</p>
</details>

使用例

FAQセクション

<summary>要素を使ったFAQの実装例です。

<details>
  <summary>Q1: このサービスは無料ですか？</summary>
  <p>A1: はい、基本プランは無料です。</p>
</details>
<details>
  <summary>Q2: サポートを受けるにはどうすればいいですか？</summary>
  <p>A2: プレミアムプランに登録することで、24時間サポートを利用できます。</p>
</details>

ナビゲーションメニュー

<summary>要素を使用してナビゲーションメニューを作成できます。

<details>
  <summary>メニュー</summary>
  <ul>
    <li><a href="#section1">セクション1</a></li>
    <li><a href="#section2">セクション2</a></li>
    <li><a href="#section3">セクション3</a></li>
  </ul>
</details>

高度なスタイリング

CSSを用いたカスタムスタイリングの例です。

<details>
  <summary class="styled-summary">詳細を表示</summary>
  <p>詳細内容がここに表示されます。</p>
</details>

.styled-summary {
  font-size: 1.2em;
  font-weight: bold;
  color: #007BFF;
  cursor: pointer;
}
.styled-summary:hover {
  text-decoration: underline;
}

注意事項

<summary>は、必ず<details>要素の最初の子要素でなければなりません。それ以外の場合、構造が正しく機能しない可能性があります。
ユーザーアクセシビリティを考慮し、クリック可能で明確な説明文を提供してください。
スクリプトでイベントを監視する際は、クリックイベントを利用して開閉状態を検知できます。

アクセシビリティ

<summary>は、スクリーンリーダーで適切に読み上げられるため、アクセシブルなインターフェースを提供します。ただし、以下の点に注意してください。

見出し部分の内容は簡潔で明確にする。
必要に応じて、aria-expanded属性を<details>要素に追加して状態を明示する。

利用シーン

FAQセクション
折りたたみメニュー
長いドキュメントやコードの要約