HTML<details>タグの要約を表す<summary>タグの基本+α

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  完全対応
注意
インターネットエクスプローラー(IE)では、detailasタグもsummaryタグもサポートされていないため、折りたたみ要素は使用できません。

summaryタグの基本的な使い方

summaryタグの使い方

summaryタグはdetailsタグの中で使用します。detailsとsummaryタグはセットで使うと覚えましょう。手順は以下の通りです。

  1. detailsタグを書く
  2. summaryタグを書き、<summary></summary>の中に説明する情報の概要を書く
  3. pタグやdlタグを使用して、詳細情報を記載する
  4. </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タグについて

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?