HTML5で導入された、詳細情報を表示するdetailsタグ。summaryタグはdetailsタグとセットで使うタグで、詳細情報の概要を表示するために記載します。しかしdetailsタグとsummaryタグをどう使うのか、正解が分からない方も多いはず。
summaryタグはどこでどう使うのが正解？
今回は、summaryタグの
・基本的な使い方
・summaryタグの見た目をCSSで変更する方法
について説明します。全てサンプルコード付きで紹介するので、CSSの適用部分など、上手くいかない部分はコピー&ペーストで動作を確認しながら読み進めてみてくださいね。
目次
summaryタグとは
summaryタグの読み方
summaryタグは「サマリータグ」と読みます。summaryは英語で概要という意味を持ちます。
summaryタグの説明
summaryタグはdetailsタグの、「概要」や「要約」を作成するためのタグです。detailsタグ内で使用し、タグ内で説明することの概要をsummaryタグ内に入れます。
summaryタグで利用できる属性
summaryタグでは、HTMLの全要素で使用できるグローバル要素のみが使用可能です。グローバル要素は以下の通りです。
| グローバル属性 | 説明 |
|---|---|
| accesskey | 要素に体するショートカットキーを指定するための属性です。 |
| autocapitalize | ブラウザでユーザーが要素に入力や編集をした際、入力欄で入力した文字列の最初の文字が自動的に大文字化されるかどうかを設定する属性です。 |
| class | 要素にCSSでスタイル（見た目）を適用するためによく使われる属性です |
| contenteditable | 要素の内容を編集可能かどうかを指定する属性です。 |
| data-* | 要素にオリジナルのデータ属性を指定するための属性です。 |
| dir | テキストの文字の方向を右書き・左書きのどちらかに指定する属性です。 |
| draggable | 要素がドラッグ可能かどうかを指定する属性です。 |
| dropzone | 要素の上でコンテンツをドロップできるかどうかを指定する属性です。 |
| hidden | 要素の非表示を指定する属性です。 |
| id | class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。 |
| inputmode | 仮想キーボードの種類の構成に関するヒントを与えます。 |
| is | 登録したカスタム内臓要素のように振舞うように指定できます。 |
| itemid | 項目で一意なグローバル識別子です。 |
| itemprop | その要素で記述された内容がどのような意味を持つかを定義する属性です。 |
| itemref | 項目に関連付けることができます。 |
| itemscope | itemtypeとセットで使用する属性です。ブロックに含まれているHTMLが特定の項目に関するということを指定します。 |
| itemtype | アイテムの種類を指定するための属性です。 |
| lang | 要素の中で使われる言語を定義する属性です。 |
| part | CSSの疑似要素::partを使用するためにパート名を付けます。 |
| slot | 要素にシャドウツリーのスロットを割り当てるための属性です。 |
| spellcheck | 要素のスペルチェックを有効にするかどうかを指定する属性です。 |
| style | 要素に直接スタイル（見た目）を指定するための属性です。 |
| tabindex | Tabキーを使って要素を選択する際の優先順位を指定する属性です。 |
| title | 要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 12 |
| Edge | 79 |
| Firefox | 49 |
| nternet Explorer | 未対応 |
| Opera | 15 |
| Safari | 6 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 4 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 49 |
| Android 版 Opera | 14 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
summaryタグの基本的な使い方
summaryタグの使い方
summaryタグはdetailsタグの中で使用します。detailsとsummaryタグはセットで使うと覚えましょう。手順は以下の通りです。
- detailsタグを書く
- summaryタグを書き、<summary></summary>の中に説明する情報の概要を書く
- pタグやdlタグを使用して、詳細情報を記載する
- </details>で閉じる
重要なポイントは、summaryタグは説明する情報の概要を書くということ。あくまでも概要なので、簡潔に伝わるように注意しましょう。
See the Pen
oNLKXwQ by rabbittyu (@rabbittyu)
on CodePen.
詳細情報を開いた状態で表示する
detailsタグ内にopen属性を書くことで、サイトをロードした際に、最初から詳細情報を開いておくこともできます。
またここでは、detailsタグ内でリストを作成するdlタグ、dtタグ、ddタグを使用しました。このようにdetailsタグでは、pタグ以外にも様々な要素を使用することができます。
See the Pen
summary応用① by rabbittyu (@rabbittyu)
on CodePen.
summaryタグの見た目をCSSで変更する
detailsタグとsummaryタグはCSSで装飾を加えることもできます。あまり推奨はされませんが、ここでは画像も挿入しています。
See the Pen
summary応用② by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はdetailsタグの中で、概要を明示するsummaryタグをご紹介しました。sumaaryタグはdetails内で使用し、説明する情報の概要を表示するタグです。
JavaScriptやCSSを使用することなく、動的な折りたたみ要素が作成できるので、積極的に取り入れてみてください。CSSでの装飾はWebページに合わせたシンプルなものがおすすめ！よりユーザに伝わりやすくなるように意識しましょう。
参考文献：
MDN web docs <summary>: 概要明示要素
summary HTML5タグリファレンス
detailsタグ、summaryタグについて
