VIDEO LESSON

HTMLのdetailsタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:25動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の八十八本目は、ディテールズタグです。
0:07ディテールズは、利用者が自分で開いたり閉じたりできる補足情報を作る要素です。
0:12最初は見出しだけが見えていて、もっと読みたい人が押すと詳しい内容が現れます。
0:16よくある質問の答えや、持ち物の詳しい説明など、最初から全部を見せる必要はないけれど、
0:20必要な人には届けたい情報に向いています。
0:24今回は、サマリーとの組み合わせ、オープン属性、ネーム属性、使い方、互換性、
0:28よくある間違いまで、順番に確認していきましょう。
0:31使う場面を整理します。
0:33ディテールズが向いているのは、よくある質問とその答え、補足の説明、詳しい注意書きなど、
0:38本文の流れでは脇役になる情報です。
0:42長いページでも、見出しだけが並ぶ形にすれば、読み手は目的の項目を探しやすくなります。
0:48しかも、この開閉はブラウザー標準の仕組みなので、ジャバスクリプトを書かなくても動きます。
0:55一方で、記事が注意している通り、重要なエラーや、必ず守るべき必須の手順を、
0:59閉じたまま隠してはいけません。
1:03閉じた情報は、開く操作をしない人には届かないからです。
1:07隠すのではなく、必要なときに開ける形にする、という線引きを意識してください。
1:13基本の書き方を確認します。
1:15ディテールズは、開始タグと終了タグを明示して、その中に内容を入れます。
1:20決め手は、最初の子要素としてサマリーを置くことです。
1:24サマリーが、常に表示される開閉見出しになります。
1:28読み手がその見出しをクリックしたり、キーボードで操作したりすると、残りの内容が開きます。
1:35本文はサマリーの後に、段落などの要素で置いてください。
1:39もしサマリーを書き忘れると、ブラウザーが自動で用意した標準の文言が見出しになり、
1:43内容が伝わりにくくなります。
1:47見出しは、何が開くのかが一目で分かる文章にすることが大切です。
1:52記事の活用事例を読み解きます。
1:54例では、サマリーに、持ち物を確認する、と書き、その後に段落で、ノートパソコンと充電器をご用意ください、
1:59と具体的な内容を続けています。
2:04閉じている間は見出しだけが見え、参加者が知りたいときだけ開ける、とても分かりやすい構成です。
2:11試すときは、練習用ファイルのボディの適切な位置にこの例を写し、保存して再読み込みしてください。
2:18そのうえで開発者ツールのエレメンツで、サマリーがディテールズの最初の子になっているか、
2:23入れ子が崩れていないかを確認しましょう。
2:28見出しを押して開閉する動きも、実際に操作して確かめてください。
2:33オープン属性についてです。
2:34オープン属性を付けたディテールズは、ページを開いた直後から、内容が展開した状態で表示されます。
2:41たとえば最初に読んでほしい注意事項や、今まさに募集中の案内など、閉じたままでは見落とされる困る情報に使うと効果的です。
2:49逆に何でもオープンにしてしまうと、折りたたむ意味が薄れてページが長くなります。
2:55基本的には閉じた状態を標準にして、特に目立たせたい一つだけを開く、くらいがちょうどよいバランスです。
3:02また、読み手が手で開閉すると、ブラウザーがこの属性の有無を自動で切り替えます。
3:07状態と見た目が連動している点も覚えておきましょう。
3:11二つの属性の注意点をまとめます。
3:13まず、オープンは真偽属性なので、あるかないかだけで決まります。
3:17オープンイコールフォールスと書いても、属性が存在する以上、開いた状態になってしまいます。
3:23閉じたいときは値を変えるのではなく、属性そのものを取り除いてください。
3:28次にネーム属性です。
3:30複数のディテールズに同じネームを付けると、一つを開いたときに他のものが自動で閉じる、
3:34排他的な開閉になります。
3:37よくある質問を並べるアコーディオンに便利ですが、これは比較的新しい機能なので、
3:42後で述べるように、本体とは別に対応状況を確認する必要があります。
3:47シーエスエスで見た目を整える方法を確認します。
3:51ディテールズに枠線や余白を付けると、補足情報のまとまりが視覚的に分かりやすくなります。
3:59サマリーにはカーソルをポインターにして、押せる場所だと伝える工夫も有効です。
4:05状態の判別には、属性セレクターが役立ちます。
4:09オープン属性があるときだけ効く指定を書けば、開いたときの見出しを太字にする、
4:13といった切り替えができます。
4:18左端の三角のマーカーもシーエスエスで大きさや色を調整できますが、開閉できる印そのものを消してしまうと、
4:24操作できると分からなくなります。
4:29装飾は、意味と操作性を損なわない範囲にとどめてください。
4:34共通属性と、似た要素との違いを確認します。
4:37ディテールズにも、アイディーやクラス、ラング、データ属性などの共通属性が使えます。
4:44アイディーを付けておけば、よくある質問の特定の項目へ、ページ内リンクで直接案内することもできます。
4:52注意したいのはダイアログとの違いです。
4:55ダイアログにもオープン属性があり、開いた状態を示す点は似ていますが、ダイアログのモーダル表示とは仕組みがまったく別です。
5:05同じ名前の属性でも、要素ごとに意味を持ち込まない、というのが記事の示す原則です。
5:12ディテールズのオープンは、あくまで折りたたみの開閉状態だと理解してください。
5:18ブラウザー互換性を確認します。
5:20記事が紹介するエムディーエヌのデータでは、ディテールズ要素本体は、クロームが十二以降、
5:25サファリが六以降、ファイアフォックスが四十九以降で対応しています。
5:30エッジは共通エンジンのデータを参照する扱いです。
5:33ファイアフォックスには補足条件があるため、細部は出典で確認してください。
5:38本体もオープン属性も古くから使えて、安心できる部類です。
5:42対照的に、ネーム属性は、クロームが百二十以降、ファイアフォックスが百三十以降、
5:46サファリが十七・二以降という新しい対応です。
5:50ネームを使う場合は、古いブラウザーでは排他開閉だけが効かず、内容自体は読める形になっているかを確認しましょう。
5:57よくある間違いを三つ挙げます。
5:59一つ目は、大切な情報を隠してしまうことです。
6:02必須の手順や重要な警告まで折りたたむと、開かなかった人にまったく届きません。
6:08二つ目は、サマリーを省いたり、最初の子以外の場所に置いたりすることです。
6:13その場合、標準の文言が見出しになり、中身の想像がつかなくなります。
6:18見出しは、質問そのものや、内容を要約した具体的な文にしてください。
6:23三つ目は、オープンイコールフォールスで閉じたつもりになることです。
6:27真偽属性は値ではなく有無で決まるので、これは開いた状態の指定になります。
6:33さらに、スマホの三百二十ピクセル程度の幅や文字拡大でも、見出しと本文が欠けないかを合わせて確認しましょう。
6:40まとめです。
6:41ディテールズは、利用者が開閉できる補足情報を、ジャバスクリプトなしで作れる要素です。
6:47最後にチェックリストで確認しましょう。
6:50まず、折りたたむのが本当に補足情報で、必須の内容を隠していないか。
6:55次に、サマリーが最初の子にあり、開く内容が分かる見出しになっているか。
7:00そして、オープンは初期状態の指定として正しく使い、ネームのような新しい属性は対応状況を別に確認したか。
7:07さらに、タブ、エンター、スペースなどの標準操作で開閉できるかも試してください。
7:12この条件がそろえば、ページはすっきりし、必要な情報は必要な人に届きます。
7:18ぜひ、よくある質問のページなどで活用してみてください。
7:21これでディテールズタグの解説を終わります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

detailsタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。利用者が開閉できる補足情報。open 属性で初期状態を開けます。

解説記事・サンプルコードを読む：HTMLのdetailsタグとは？属性・使い方・ブラウザー互換性と活用例 →