生成 AI Gemini 使用例の紹介: <details>タグとは

2025年8月30日土曜日

<details>タグは、Webページ上で折りたたみ可能なコンテンツを作成するために使われるHTML要素です。このタグを使うと、初期状態ではコンテンツが非表示になっており、ユーザーがクリックすることで表示/非表示を切り替えることができます。

<details>タグは、通常、その中に<summary>タグを含めて使用します。

<summary>タグ: 折りたたまれた状態で見える見出しやタイトルを指定します。これをクリックすると、コンテンツが開いたり閉じたりします。
その他のコンテンツ: <summary>タグの後に記述されたHTMLコンテンツが、折りたたまれる部分となります。

HTML
<details>
  <summary>タイトルや見出し</summary>
  <p>ここに折りたたまれるコンテンツが入ります。</p>
  <p>例えば、詳細な説明や補足情報など。</p>
</details>

上記のコードをブラウザで表示すると、最初は「タイトルや見出し」だけが見えており、クリックするとその下の段落が表示されます。

<details>タグには、openというブール型属性があります。これを追加すると、ページの読み込み時に最初からコンテンツが開いた状態になります。

HTML
<details open>
  <summary>最初から開いている例</summary>
  <p>このコンテンツは、ページを読み込んだ時点で既に表示されています。</p>
</details>

<details>タグは、以下のような場面で特に役立ちます。

このタグを使うことで、Webページの情報を整理し、ユーザーインターフェースをより使いやすくすることができます。