HTML5から新しく追加された「折りたたみ要素」をご存じですか？CSSやJavaScriptを使用せず、タグ設置だけで動的なページを作成できる要素なのです！
datailsタグを使って動的な折りたたみ要素を作成する方法とは？
今回は、detailsタグの
・基本的な使い方
・summaryタグを使用しなかった場合の違い
・detailsタグをCSSで装飾する方法
について説明します。
目次
detailsタグとは
detailsタグの読み方
detailsタグは「ディテイルズタグ」と読みます。detailsは英語で詳細という意味を持ちます。
detailsタグの説明
detailsタグはクリックすると折りたたみ要素が出現し、その中で捕捉の説明を行うタグです。JavaScriptやCSSを設定することなく、HTMLのみで動的なページが作成できるよう、HTML5から新しく追加されました。
使い方の詳細は後述しますが、detaildタグはsummaryタグとセットで使うのが基本です。detailsタグでは説明する用語自体を記述し、summaryタグにはその用語の説明を記載します。
detailsタグで利用できる属性
detailsタグでは、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 | 要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。 |
| それ以外の属性 | 説明 |
| open | ページ読み込み時に要素の詳細を表示するかを定義する属性です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 12 |
| Edge | 79 |
| Firefox | 49 |
| nternet Explorer | 未対応 |
| Opera | 15 |
| Safari | 6 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 49 |
| Android 版 Opera | 14 |
| iOS版Safari | 6.1 |
| Samsung Internet | 完全対応 |
detailsタグの基本的な使い方
detailsタグの使い方
概要を書く
detailsタグを使用する際のポイントは、中の補足情報の記述をどう書くか。まずは一番単純な<p>タグを使用した書き方をご説明します。
先述した通りdetailsタグはsummaryタグとセットで使うのが基本です。summryタグとセットで使うと概要を記載することになります。
- detailsタグを書く
- <details></details>の中にsummaryタグを書く。summaryタグには捕捉する情報の概要を書く。
- <summary></summary>タグの中に、その補足情報を書く。
See the Pen
details基本 by rabbittyu (@rabbittyu)
on CodePen.
detailsタグのみで単純な折りたたみ要素を作る
もちろんsummaryタグを使わずに、detailsタグのみで折りたたみ要素を作ることもできます。summryタグを省くと、概要のタイトルを付けることができず、単純に「詳細」とのみ表示されるようになってしまいます。
また、ここではdetailsタグにopen属性を付けたしました。こうすることで、Webページの読み込み時に、折りたたみ要素が開いたままで表示されるようになります。
See the Pen
details単純 by rabbittyu (@rabbittyu)
on CodePen.
detailsタグの応用的な使い方
detailsタグは装飾して、より自分好みにカスタマイズすることもできます。ここではボタンを設置したときの装飾と同じように装飾しました。detailsタグの中には、summaryタグとdlタグ、dtタグ、ddタグを使用して、リストを作成しています。
疑似要素:hoverを使用することで、カーソルが上に乗ったときに動作を変えられるようにしてあります。detailsタグの装飾方法はデザイン次第で可能性が広がるので、作成しているWebページに合わせてCSSを適用すると良いでしょう。
See the Pen
details CSS by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回は折りたたみ要素を表示するdetailsタグについて解説しました。
- detailsタグは折りたたみ要素を出現させる
- summaryタグを一緒に使用すると、概要名を付けることができる
- detailsタグの中には、pタグやdlタグなど、自由にタグを設置できる
以上3点がdetailsタグの重要なポイントになります。summaryタグを使用しないと、「詳細」表示のみになってしまうということだけ注意しましょう。
参考文献：
details HTML5クイックリファレンス
MDN Web docks <details>: 詳細折りたたみ要素
details/summaryタグ -CODE KITCHEN-
