IT初心者の分かったメモ

1. はじめに

Webサイトにおいて、クリックによってコンテンツを開閉する仕組みはよく使われるUIで、一般的にアコーディオンメニューと呼ばれます。前回の記事で紹介したハンバーガーメニューも、その一種です。今回はJavaScriptを用いずに、HTMLとCSSのみでコンテンツを開閉できる detailsタグ と summaryタグ の紹介をします。また、JavaScriptでアコーディオンメニューを実装する場合との違いや特徴についても解説していきます。

2. detailsとsummaryとは？

detailsタグ と summaryタグ は基本的にセットで使用します。それぞれの役割は以下のとおりです。

• details: 折りたたみ可能な領域を作るためのタグです。これ自体は親要素にあたります。
• summary: detailsで作った領域に見出しやタイトルを設定するタグです。ここをクリックすると、詳細の表示・非表示を切り替えることができます。

この2つを組み合わせることで、シンプルな「クリックで開閉する仕組み」をHTMLだけで実現できます。次の章では基本的な書き方を見ていきましょう。

3. 基本の書き方

detailsタグとsummaryタグの役割が分かったところで、実際の使い方を確認してみます。基本の形はとてもシンプルで、detailsの中にsummaryを置き、その下に表示したい内容を書くだけです。

<details>
 <summary>クリックして詳細を表示</summary>
 <p>ここに折りたたまれる内容が入ります。</p>
</details>

このように、JavaScriptを使わなくてもクリックで開閉する仕組みを簡単に実装できるのがdetailsタグとsummaryタグの利点です。

4. JavaScriptで実装する場合との違い

detailsタグとsummaryタグを使えば、HTMLだけで開閉機能を実装できます。しかし、同じ仕組みはJavaScriptでも作ることが可能です。では、両者にはどのような違いがあるのでしょうか。以下の表で比較してみます。

表から分かるように、シンプルな開閉だけならdetails/summaryで十分です。逆に、開閉に合わせて他の処理をしたい場合や高度なUIを実装したい場合にはJavaScriptを使うのが有効です。

5. よくある活用例

detailsとsummaryタグは、シンプルな仕組みをすぐに導入できるのが魅力です。実際のWebサイトでよく見られる活用例は次のとおりです。

• FAQ（よくある質問） … 質問をクリックすると答えが表示される仕組み
• 補足や注意書き … 必要なときだけ開いて確認できる仕組み
• コードサンプルや長文テキスト … 長い内容を折りたたみ、必要な人だけ確認できる仕組み

これらを取り入れることで、ページを見やすく整理できます。

6. CSSでデザインを整える

details/summaryタグはそのままでも使えますが、CSSを加えることでより見やすいデザインにできます。ここでは、先ほどの活用例に対応したデザインサンプルを紹介します。必要に応じて、自分のサイトに合わせてアレンジしてください。

HTML
<details>
 <summary>Q. このサイトは無料で閲覧できますか？</summary>
 <p>A. はい、全ての記事は無料で閲覧いただけます。</p>
</details>

CSS
details {
  margin: 1em 0;
  border-bottom: 1px solid #ddd;
  padding: 0.5em 0;
  font-weight: bold;
}
summary {
  cursor: pointer;
}

HTML
<details  class="note">
 <summary>補足説明を見る</summary>
 <p>この操作は一度実行すると取り消せません。注意して進めてください。</p>
</details>

CSS
.note {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #f39c12;
  background: #fff8e6;
  border-radius: 4px;
  font-weight: bold;
}
.note summary {
  color: #e67e22;
  cursor: pointer;
}

HTML
<details class="code-block">
  <summary>コードを表示</summary>
  <pre><code><h1>Hello World</h1>
<p>これはサンプルコードです。</p></code></pre>
</details>

CSS
.code-block {
  margin: 1em 0;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f4f4f4;
  font-family: monospace;
}
.code-block summary {
  font-weight: bold;
  cursor: pointer;
  color: #2c3e50;
}

<h1>Hello World</h1>
<p>これはサンプルコードです。</p>

7. 注意点と対応ブラウザ

便利なdetails/summaryタグですが、いくつか注意点があります。

• summaryタグは必ずdetailsの最初に書く必要があります。途中に書くと正しく動作しません。
• クリックできるのはsummary部分のみで、それ以外の要素をクリックしても開閉はしません。これは仕様なので問題ありません。
• 古いブラウザ（特にInternet Explorer）は非対応です。ただし、Chrome・Safari・Edge・Firefoxなど主要ブラウザでは問題なく使用できます。IEをサポートする場合はJavaScriptで別途実装する必要があります。

8. まとめ

今回は、HTMLのdetailsタグとsummaryタグについて解説しました。クリックで開閉できる仕組みをHTMLだけで簡単に実装できるのが大きな特徴です。

まとめると、

• details は「折りたたみ可能な箱」
• summaryはその「見出し（クリック部分）」
• FAQ・補足説明・コード折りたたみなどに便利
• CSSを使えばデザインも自由にカスタマイズ可能
• 主要ブラウザでは対応しているが、IEは非対応

このように、JavaScriptでも同じ仕組みは実装可能ですが、それぞれの利点があります。シンプルに実装したいときはdetails/summaryを、複雑なUIを作りたいときはJavaScriptを活用し、うまく使い分けてWeb制作に役立てていきましょう。