HTML要素 ・ その他
<summary>
detailsの見出し
details 要素の見出し部分です。ここをクリックすると、details の中身が開閉します。
01
サンプルコード
HTML
1<details>
2 <summary>営業時間を見る</summary>
3 <p>平日 8:00〜20:00 ／ 土日 9:00〜18:00</p>
4</details>
CSS
1summary {
2 list-style: none;
3 cursor: pointer;
4 padding: 8px 12px;
5 background: #faf5ec;
6}
7summary::-webkit-details-marker {
8 display: none;
9}
10summary::after {
11 content: " ＋";
12}
13details[open] summary::after {
14 content: " －";
15}
02
実行結果
ブラウザでの表示クリックすると開閉し、右側の記号が切り替わります
03
解説
summary は、details の開閉ボタンの役割を持つ見出しです。details の最初の子要素として1つだけ書きます。
既定では先頭に三角形のマーカーが付きます。CSSの list-style: none で消し、代わりに ::after などで独自の記号を付けられます。
details[open] セレクタを使うと、開いているときだけ見た目を変えられます。
04
応用例・注意点
よく使うCSS
| セレクタ・プロパティ | 説明 |
|---|---|
list-style: none | 既定の三角マーカーを消す |
::-webkit-details-marker | Safari 向けにマーカーを消す |
details[open] summary | 開いているときの summary |
cursor: pointer | クリックできることを示す |
見出しの中に h3 を入れる
summary の中には見出し要素も入れられます。
HTML
1<details>
2 <summary><h3>配送について</h3></summary>
3 <p>…</p>
4</details>
CSS
1summary h3 {
2 display: inline;
3}
注意点
- 01summary の中にリンクやボタンを入れると、クリックの動作が分かりにくくなります。
- 02details の外で summary は使えません。