HTML Living Standard/details

DETAILS要素

<details>要素は、ユーザーが開閉できる情報の折りたたみコンテナを作成するために使用されます。この要素は、要約や詳細情報を効率的に表示する際に役立ちます。

定義

<details>要素は、折りたたみ可能な領域を提供します。
子要素として<summary>を含めることで、折りたたみのヘッダー部分を定義します。
初期状態では閉じた状態ですが、open属性を使用して開いた状態に設定することもできます。

使用方法

基本例

<details>
  <summary>詳細を表示</summary>
  <p>ここに詳細情報が表示されます。</p>
</details>

この例では、「詳細を表示」というラベルをクリックすると、詳細情報が展開されます。

初期状態で展開する

<details open>
  <summary>詳細を表示</summary>
  <p>ここに詳細情報が表示されます。</p>
</details>

open属性を追加することで、ページロード時に折りたたみが展開された状態になります。

属性

open

折りたたみを開いた状態にするためのブール属性です。
属性が存在すると、初期状態で展開されます。

<details open>
  <summary>常に表示</summary>
  <p>この詳細は常に展開されています。</p>
</details>

使用例

FAQセクション

<details>要素は、FAQセクションでよく使用されます。

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

コード例の折りたたみ

プログラミングコードを折りたたむためにも使用できます。

<details>
  <summary>コードを表示</summary>
  <pre><code>
function greet() {
  console.log("Hello, world!");
}
  </code></pre>
</details>

コンテンツの分割

長い記事やページをセクションごとに折りたたむ場合に便利です。

<details>
  <summary>イントロダクション</summary>
  <p>この記事では、基本的なHTMLの要素について説明します。</p>
</details>
<details>
  <summary>詳細情報</summary>
  <p>このセクションでは、より詳細な技術的情報を提供します。</p>
</details>

スタイリング

<details>要素と<summary>要素は、CSSでカスタマイズできます。

details {
  margin-bottom: 1em;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 5px;
}

summary {
  cursor: pointer;
  font-weight: bold;
  color: #007BFF;
}

details[open] {
  border-color: #007BFF;
}

注意事項

<details>要素をサポートしない古いブラウザでは、常に展開された状態で表示されます。
- その場合、JavaScriptを使用して類似の機能を実現する必要があります。
ユーザーアクセシビリティを考慮し、<summary>にはクリック可能な明確なラベルを指定してください。

利用シーン

FAQページ
長いテキストの折りたたみ
技術文書やコードサンプルの表示
メニューや設定項目の折りたたみ