VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の八十四本目は、ディーエルタグです。
0:08ディーエルは、説明リストと呼ばれる要素で、用語と説明など、名前と値の組をまとめる入れ物です。
0:15辞書を思い浮かべてください。
0:17見出し語とその意味が対になっている、あの形がまさにディーエルのイメージです。
0:23今回は、ディーエルの意味から、ディーティーとディーディーとの関係、使い方、
0:28ディブによるグループ化、よくある間違いまで、順番に確認していきましょう。
0:33用語集や製品の仕様表で、この形を目にしたことがある方も多いはずです。
0:38基本の書き方を確認します。
0:40ディーエルは、開始タグと終了タグで全体を囲み、その中に名前を書くディーティーと、
0:45説明を書くディーディーを順番に置きます。
0:49ディーティーが先、ディーディーが後という順番が大切です。
0:53画面の例では、エイチティーエムエルという用語と、その説明が一組になっています。
0:59ディーエル単独では何も表示されず、中の組があって初めてリストとして意味を持ちます。
1:05まずはこの三点セットの形を覚えて、練習ファイルで一組書いてみることから始めましょう。
1:11組を増やしたいときは、同じ順番でディーティーとディーディーのペアを繰り返すだけです。
1:17三つのタグの役割分担を整理します。
1:19ディーエルが全体の入れ物、ディーティーが用語や項目名、ディーディーが直前のディーティーに対応する説明や値です。
1:27たとえば製品の仕様なら、画面サイズという項目名がディーティー、その大きさがディーディーになります。
1:34この対応をエイチティーエムエルで表すことで、読み上げソフトや検索エンジンにも、
1:38どれが名前でどれが説明なのかが伝わります。
1:42見た目が似ているからではなく、名前と説明の関係があるときに選ぶのがポイントです。
1:47一組ごとに意味が完結するため、あとから項目を追加したり、順番を入れ替えたりもしやすくなります。
1:54記事の活用事例を読み解きます。
1:56記事では、用語集を例に、二つの用語を並べています。
2:00エイチティーエムエルは内容の構造を記述する言語、シーエスエスは見た目を指定する言語、
2:04という二組です。
2:08一組だけでも、二組でも、書き方は同じで、ディーティーとディーディーのペアを必要な分だけ繰り返します。
2:15試すときは、練習用ファイルのボディにディーエルごと写し、保存して再読み込みしてください。
2:22開発者ツールで入れ子の順番が正しいか確認すると、ブラウザーの補正にも気づけます。
2:28表示された結果だけでなく、名前と説明が対応して読めるかどうかも合わせて確認してください。
2:34ディーエルの使い道は、用語集だけにとどまりません。
2:38製品の仕様、講座の案内、プロフィールなど、項目名と内容が対になる情報なら幅広く使えます。
2:45よくある質問では、質問をディーティー、回答をディーディーにする方法も自然です。
2:52一方で、行と列で値を比べることが主目的なら、表のテーブルが向いていますし、
2:57手順なら順序リスト、単なる箇条書きなら箇条書きリストが向いています。
3:03内容が名前と値の組かどうかを基準に、タグを選んでください。
3:07プロフィールで出身地や担当などを並べる場合も、同じ考え方で整理できます。
3:13見た目を整えるときに便利なのが、ディブによるグループ化です。
3:18現在の仕様では、ディーエルの中で、ディーティーとディーディーの組をディブで包む書き方が認められています。
3:25組ごとにディブで包むと、シーエスエスで組単位に余白や枠を付けたり、名前と説明を横並びにしたりしやすくなります。
3:34ただし、ディブ自体に意味はありません。
3:37包んでも包まなくても、ディーエルの意味は変わりません。
3:41グループ化は装飾やレイアウトを助けるための工夫と理解しておきましょう。
3:46なお、この書き方は現在の仕様で認められたもので、古い解説と混同しないように注意してください。
3:53組み合わせの柔軟さも知っておきましょう。
3:56一つのディーティーに対して、説明を分けて複数のディーディーを続けることができます。
4:02逆に、別名のある用語のように、複数のディーティーに対して一つのディーディーを対応させる書き方も可能です。
4:09ただし、複雑にしすぎると、読み手がどの説明がどの名前に対応するのか分かりにくくなります。
4:16初心者のうちは、一つの名前に対して一つの説明という一対一の形を基本にし、
4:20必要な場面でのみ複数を組み合わせてください。
4:24実務では、読み手の理解しやすさを優先して、シンプルな構成を選ぶことがほとんどです。
4:30属性を確認します。
4:31ディーエルには、この記事で必須となる専用の属性はありません。
4:36必要に応じて、アイディー、クラス、ラングといったグローバル属性を使います。
4:41アイディーは文書内で一意な識別子、クラスはシーエスエスやスクリプトでまとめて選ぶための名前、
4:45ラングは内容の言語を示します。
4:49データ属性で独自の値を保持することもできますが、秘密情報を置く場所ではありません。
4:55子要素であるディーティーやディーディーの属性と混同せず、ディーエル自体には控えめに付けましょう。
5:02必要な場面が来るまでは、属性を付けずにシンプルに書いておくのが初心者にはおすすめです。
5:08他の要素との使い分けを確認します。
5:11順番に意味のない箇条書きはユーエル、手順など順番に意味があるものはオーエル、
5:16行と列で比較するデータはテーブルが適しています。
5:21ディーエルは、そのどれでもない、名前と説明の組専用と考えると迷いません。
5:26見た目については、ディーディーが少し字下げされるのが標準の表示ですが、色や余白、
5:31横並びなどの装飾はシーエスエスで調整します。
5:36意味はエイチティーエムエル、見た目はシーエスエスという分担を守りましょう。
5:42迷ったときは、その情報が名前と説明の組なのか、それとも単なる一覧なのかを自問してみてください。
5:50ブラウザー互換性を確認します。
5:52記事が参照するエムディーエヌのデータでは、ディーエル要素は、クロームが一以降、
5:57エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。
6:02古くからすべての主要ブラウザーで使える、安心な基本要素の一つです。
6:06対応自体を心配する必要はほぼありませんが、三百二十ピクセル程度の狭い画面や、
6:11文字を拡大したときにも、名前と説明の対応が読み取りやすいかは確認しておきましょう。
6:16実機でのチェックもおすすめです。
6:18新しい属性や実験的な機能を使う場合とは違い、要素そのものの対応は安定しています。
6:23最後に、よくある間違いとまとめです。
6:26一つ目は、ディーエルの中にディーティーとディーディー以外のものを直接置いてしまうことです。
6:32二つ目は、見た目が二列だからという理由だけでディーエルを選び、比較が目的なのにテーブルを使わないことです。
6:41三つ目は、ディーディーを先に書いて順番を逆にしたり、ディーエルで囲まずにディーティーだけを置いたりすることです。
6:49ディーエルは、名前と値の組全体をまとめる説明リストです。
6:53ディーティー、ディーディーとの三点セットを意識して使ってみてください。
6:59お疲れさまでした。
7:00練習として、用語を二つ並べた小さな用語集を一つ作ってみると、理解がぐっと深まります。

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

この動画で学べること

dlタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。用語と説明など、名前と値の組をまとめます。

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