• Home
  • Web制作
  • 【CSS】詳細を開いて表示！details/summaryを使いこなす方法

【CSS】詳細を開いて表示！details/summaryを使いこなす方法

schedule update
Tags: CSS

はじめに：details/summary要素で表現豊かなコンテンツを！

Webサイトを閲覧していると、「詳細はこちら」などのリンクをクリックして、隠れている情報を開いて表示するコンテンツを目にしませんか？ このような開閉式のコンテンツは、ユーザーが必要な情報を選択して見ることができるので、ユーザー体験の向上に役立ちます。

HTML5から導入された details 要素と summary 要素を使えば、JavaScript を使わなくても、簡単にこのような開閉式のコンテンツを実装できます。この記事では、 details/summary要素の基本的な使い方から、CSSを使ったデザインのカスタマイズまでご紹介します。

1. details/summary要素の基本を理解する

1-1. details要素とsummary要素の役割

  • details 要素：開閉可能なコンテンツのコンテナとなる要素です。
  • summary 要素： details要素内に設置し、クリックすることで開閉のトリガーとなる要素です。

1-2. 基本的な記述方法

<details>
  <summary>詳細はこちら</summary>
  <p>開閉されるコンテンツが入ります。</p>
</details>

上記のように記述すると、「詳細はこちら」というテキストをクリックすることで、p要素内のコンテンツが開閉されるようになります。

詳細はこちら

開閉されるコンテンツが入ります。

2. CSSでdetails/summary要素をカスタマイズ

details/summary要素は、CSSを使って自由にデザインをカスタマイズできます。

2-1. 開閉状態の切り替えに合わせたスタイル変更

details 要素は、開閉状態に応じて :open 疑似クラスが適用されます。これを利用することで、開閉状態に合わせてスタイルを変更できます。

.sample1[open] summary {
  font-weight: bold; /* 開いているときは太字にする */
}

<details class="sample1">
  <summary>開閉状態の切り替えに合わせたスタイル変更</summary>
  <p>開いているときは太字にする</p>
</details>
開閉状態の切り替えに合わせたスタイル変更

開いているときは太字にする

2-2. 矢印アイコンの変更

デフォルトでは、summary要素の横に開閉状態を示す矢印アイコンが表示されますが、CSSで非表示にしたり、別のアイコンに変更したりできます。

.sample2 summary {
  list-style: none; /* 矢印アイコンを非表示にする */
}
.sample2 summary::-webkit-details-marker {
  display: none; /* 矢印アイコンを非表示にする */
}
.sample2 summary:before {
    content: "+";
}
.sample2[open] summary:before {
    content: "-";
}

<details class="sample2">
  <summary>矢印アイコンの変更</summary>
  <p>アイコンを - にする</p>
</details>
矢印アイコンの変更

アイコンを - にする

3. 様々な応用例

3-1. アコーディオンメニュー

複数のdetails/summary要素を組み合わせることで、アコーディオンメニューを実装できます。

<details>
  <summary>メニュー1</summary>
  <p>コンテンツ1</p>
</details>
<details>
  <summary>メニュー2</summary>
  <p>コンテンツ2</p>
</details>

3-2. FAQページでの活用

FAQページで、質問と回答をdetails/summary要素でまとめることで、ユーザーが見たい情報にアクセスしやすくなります。

4. まとめ：details/summary要素で表現豊かなWebサイトを！

details/summary要素を使うことで、JavaScript を使わずに、ユーザーフレンドリーな開閉式コンテンツを簡単に実装できます。CSSを組み合わせれば、さらに表現の幅が広がりますので、ぜひ活用してみてください。

関連記事