SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 6:51動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の九十本目は、ディーディータグです。
  4. 0:07ディーディーは、直前に書かれた用語に対応する、詳しい説明や値を示す要素です。
  5. 0:12辞書で例えるなら、見出し語が用語で、その意味を説いた本文がディーディーにあたります。
  6. 0:17単独で使うタグではなく、用語を示すディーティー、そして全体を包むディーエルと組み合わせて初めて意味が完成します。
  7. 0:24今回は、ディーディーの意味、三点セットの組み合わせ、使い方、コード例、ブラウザー互換性、
  8. 0:29よくある間違いまで、順番に確認していきましょう。
  9. 0:33まず、三点セットの関係を整理します。
  10. 0:36親要素のディーエルは、定義リストとも呼ばれ、用語と説明の組全体を包みます。
  11. 0:42その中で、ディーティーが用語や名前を示し、ディーディーがその説明や値を担当します。
  12. 0:48たとえば商品情報なら、項目名がディーティー、価格や仕様といった中身がディーディーです。
  13. 0:55よくある質問集、用語集、店舗情報の案内など、名前と値が対になる情報なら、
  14. 0:59幅広く使えます。
  15. 1:02表ほどの行列構造は要らないけれど、ただの箇条書きより対応関係をはっきりさせたい、
  16. 1:07そんな場面にちょうど合う組み合わせです。
  17. 1:12基本の書き方を確認します。
  18. 1:14この教材では、開始タグと終了タグを明示して、その間に説明を入れます。
  19. 1:20配置のルールが大切で、ディーディーは必ずディーエルの中に入れ、対応するディーティーの後に置きます。
  20. 1:28画面の例では、開催日という用語の後に日付、会場という用語の後に教室名と、
  21. 1:31二組が順番に並んでいます。
  22. 1:35順番を逆にしたり、ディーエルなしでディーディーだけを置いたりすると、ブラウザーが構造を補正して、
  23. 1:41意図と違う表示になることがあります。
  24. 1:46対応関係は前後の並びで決まる、という点を覚えておいてください。
  25. 1:51記事の活用事例を読み解きます。
  26. 1:54例では、参加条件という用語をディーティーに置き、その説明として、ブラウザーを操作できること、
  27. 1:59という文章をディーディーの中に入れています。
  28. 2:05注目したいのは、ディーディーの中にピータグで段落を入れている点です。
  29. 2:11説明が長くなるときは、このように段落としてきちんと構造化できます。
  30. 2:16試すときは、練習用ファイルのボディの適切な位置に、親のディーエルごとこの例を写し、
  31. 2:21保存して再読み込みしてください。
  32. 2:26開発者ツールのエレメンツで、入れ子が崩れていないかも合わせて確認しましょう。
  33. 2:32組み合わせの応用を確認します。
  34. 2:34一つの用語に対して、説明を二つに分けて書きたい場合は、ディーディーを複数続けることができます。
  35. 2:41画面の例では、エイチティーエムエルという一つの用語に、役割の説明と、具体的な働きの説明が二つ並んでいます。
  36. 2:48反対に、別々の呼び名を持つ同じ対象を説明する場合は、ディーティーを複数並べてから、
  37. 2:52共通のディーディーを一つ置く書き方もできます。
  38. 2:57記事が注意している通り、複数の説明を示すときほど、どの用語に対応しているのかが読み手に伝わる並びを崩さないことが大切です。
  39. 3:05ディーディーの中身についてです。
  40. 3:07ディーディーには、普通の文章だけでなく、段落、リンク、箇条書きなど、本文として自然な内容を幅広く入れられます。
  41. 3:15説明が長くなる用語集では、一段落目に要点、二段落目に補足、という書き分けも可能です。
  42. 3:21ただし、何でも詰め込んでよいわけではありません。
  43. 3:24説明があまりに長く複雑になるなら、その用語自体を独立した章に分けた方が、
  44. 3:28読み手にとって分かりやすい場合もあります。
  45. 3:32あくまで、用語への答えとして読める長さと構造を目安にしてください。
  46. 3:37対応する用語が一目で追えることが、定義リストらしさの条件です。
  47. 3:41属性についてです。
  48. 3:42ディーディーには、この記事で必須となる専用の属性はありません。
  49. 3:46必要に応じて、アイディー、クラス、ラングといった、多くの要素で使えるグローバル属性を利用します。
  50. 3:53クラスはシーエスエスで説明文の見た目を整えるとき、アイディーはページ内リンクやプログラムからの参照に使います。
  51. 4:00注意点は、ディーディー自身の属性と、その中に入れた子要素の属性を混同しないことです。
  52. 4:06たとえば中のリンクに付ける属性は、リンク側の書き方を確認してください。
  53. 4:10属性で見た目を付けても、要素の意味自体は変わらない点も覚えておきましょう。
  54. 4:15見た目を確認します。
  55. 4:17多くのブラウザーでは、ディーディーは用語よりも少し右にずらして、左側に余白を付けた形で表示されます。
  56. 4:24そのため、説明だと視覚的にも分かりやすくなります。
  57. 4:28ただし、この字下げの見た目だけを目的にディーディーを使うのは誤りです。
  58. 4:33意味はあくまで、用語への説明であること。
  59. 4:36余白の大きさや文字の色を変えたいときは、画面の例のようにシーエスエスで調整し、
  60. 4:41タグの選択は意味で、装飾はシーエスエスで、と分けて考えてください。
  61. 4:47横並びのレイアウトにしたい場合も、ディーエル側にフレックスやグリッドを指定する方法があります。
  62. 4:54ブラウザー互換性を確認します。
  63. 4:56記事が紹介するエムディーエヌのデータでは、ディーディー要素本体は、クロームが一以降、
  64. 5:00ファイアフォックスが一以降で補足条件付き、エッジが十二以降、サファリが四以前から対応している、
  65. 5:05非常に古くから使える要素です。
  66. 5:10実務では安心して使える部類と言えます。
  67. 5:12ただし、この表は要素本体の対応開始版を示すもので、周囲の装飾やレイアウトまで同じ表示を保証するものではありません。
  68. 5:20アイオーエス版サファリやアンドロイド版クロームなどモバイル環境も含め、利用対象の実機で一度表示を確かめる習慣は付けておきましょう。
  69. 5:29よくある間違いを三つ挙げます。
  70. 5:32一つ目は、ディーエルやディーティーを省いて、ディーディーだけを置いてしまうことです。
  71. 5:38対応する用語がなければ、説明だけが宙に浮いてしまいます。
  72. 5:42二つ目は、文章を右にずらしたいだけの理由でディーディーを流用することです。
  73. 5:48余白はシーエスエスで作るのが正しい方法です。
  74. 5:51三つ目は、説明の順番を入れ替えて、どの用語への説明か分からなくすることです。
  75. 5:57定義リストは前後の並びで対応が決まります。
  76. 6:00あわせて、三百二十ピクセル程度の小さい画面幅や文字拡大でも、内容が欠けずに読めるかを確認してください。
  77. 6:08まとめです。
  78. 6:09ディーディーは、直前のディーティーが示す用語や名前に対応する、説明や値を書くための要素です。
  79. 6:16最後にチェックリストで確認しましょう。
  80. 6:19まず、全体がディーエルで包まれ、ディーディーが対応するディーティーの後に置かれているか。
  81. 6:26次に、複数の説明がある場合でも、どの用語への説明か読み手に崩れず伝わるか。
  82. 6:32そして、字下げなどの見た目目的で流用せず、装飾はシーエスエスに分けられているか。
  83. 6:39この三点がそろえば、読みやすい定義リストになります。
  84. 6:43これでディーディータグの解説を終わります。
  85. 6:46ぜひ、用語集や店舗情報のページで実際に試してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

ddタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。直前の dt に対応する説明や値を示します。

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