WEBVTT

1
00:00:00.000 --> 00:00:00.880
こんにちは。

2
00:00:00.880 --> 00:00:04.109
エイチティーエムエル、リファレンス解説です。

3
00:00:04.109 --> 00:00:08.658
エイチティーエムエルタグ編の八十四本目は、ディーエルタグです。

4
00:00:08.658 --> 00:00:15.408
ディーエルは、説明リストと呼ばれる要素で、用語と説明など、名前と値の組をまとめる入れ物です。

5
00:00:15.408 --> 00:00:17.462
辞書を思い浮かべてください。

6
00:00:17.462 --> 00:00:23.039
見出し語とその意味が対になっている、あの形がまさにディーエルのイメージです。

7
00:00:23.039 --> 00:00:28.395
今回は、ディーエルの意味から、ディーティーとディーディーとの関係、使い方、

8
00:00:28.395 --> 00:00:33.751
ディブによるグループ化、よくある間違いまで、順番に確認していきましょう。

9
00:00:33.751 --> 00:00:38.740
用語集や製品の仕様表で、この形を目にしたことがある方も多いはずです。

10
00:00:38.740 --> 00:00:40.643
基本の書き方を確認します。

11
00:00:40.643 --> 00:00:45.034
ディーエルは、開始タグと終了タグで全体を囲み、その中に名前を書くディーティーと、

12
00:00:45.034 --> 00:00:49.425
説明を書くディーディーを順番に置きます。

13
00:00:49.425 --> 00:00:53.523
ディーティーが先、ディーディーが後という順番が大切です。

14
00:00:53.523 --> 00:00:59.232
画面の例では、エイチティーエムエルという用語と、その説明が一組になっています。

15
00:00:59.232 --> 00:01:05.233
ディーエル単独では何も表示されず、中の組があって初めてリストとして意味を持ちます。

16
00:01:05.233 --> 00:01:11.380
まずはこの三点セットの形を覚えて、練習ファイルで一組書いてみることから始めましょう。

17
00:01:11.380 --> 00:01:17.528
組を増やしたいときは、同じ順番でディーティーとディーディーのペアを繰り返すだけです。

18
00:01:17.528 --> 00:01:19.868
三つのタグの役割分担を整理します。

19
00:01:19.868 --> 00:01:27.439
ディーエルが全体の入れ物、ディーティーが用語や項目名、ディーディーが直前のディーティーに対応する説明や値です。

20
00:01:27.439 --> 00:01:34.184
たとえば製品の仕様なら、画面サイズという項目名がディーティー、その大きさがディーディーになります。

21
00:01:34.184 --> 00:01:38.314
この対応をエイチティーエムエルで表すことで、読み上げソフトや検索エンジンにも、

22
00:01:38.314 --> 00:01:42.444
どれが名前でどれが説明なのかが伝わります。

23
00:01:42.444 --> 00:01:47.950
見た目が似ているからではなく、名前と説明の関係があるときに選ぶのがポイントです。

24
00:01:47.950 --> 00:01:54.420
一組ごとに意味が完結するため、あとから項目を追加したり、順番を入れ替えたりもしやすくなります。

25
00:01:54.420 --> 00:01:56.686
記事の活用事例を読み解きます。

26
00:01:56.686 --> 00:02:00.464
記事では、用語集を例に、二つの用語を並べています。

27
00:02:00.464 --> 00:02:04.241
エイチティーエムエルは内容の構造を記述する言語、シーエスエスは見た目を指定する言語、

28
00:02:04.241 --> 00:02:08.018
という二組です。

29
00:02:08.018 --> 00:02:15.573
一組だけでも、二組でも、書き方は同じで、ディーティーとディーディーのペアを必要な分だけ繰り返します。

30
00:02:15.573 --> 00:02:22.220
試すときは、練習用ファイルのボディにディーエルごと写し、保存して再読み込みしてください。

31
00:02:22.220 --> 00:02:28.264
開発者ツールで入れ子の順番が正しいか確認すると、ブラウザーの補正にも気づけます。

32
00:02:28.264 --> 00:02:34.912
表示された結果だけでなく、名前と説明が対応して読めるかどうかも合わせて確認してください。

33
00:02:34.912 --> 00:02:38.886
ディーエルの使い道は、用語集だけにとどまりません。

34
00:02:38.886 --> 00:02:45.881
製品の仕様、講座の案内、プロフィールなど、項目名と内容が対になる情報なら幅広く使えます。

35
00:02:45.881 --> 00:02:52.080
よくある質問では、質問をディーティー、回答をディーディーにする方法も自然です。

36
00:02:52.080 --> 00:02:57.724
一方で、行と列で値を比べることが主目的なら、表のテーブルが向いていますし、

37
00:02:57.724 --> 00:03:03.367
手順なら順序リスト、単なる箇条書きなら箇条書きリストが向いています。

38
00:03:03.367 --> 00:03:07.977
内容が名前と値の組かどうかを基準に、タグを選んでください。

39
00:03:07.977 --> 00:03:13.700
プロフィールで出身地や担当などを並べる場合も、同じ考え方で整理できます。

40
00:03:13.700 --> 00:03:18.192
見た目を整えるときに便利なのが、ディブによるグループ化です。

41
00:03:18.192 --> 00:03:25.979
現在の仕様では、ディーエルの中で、ディーティーとディーディーの組をディブで包む書き方が認められています。

42
00:03:25.979 --> 00:03:34.215
組ごとにディブで包むと、シーエスエスで組単位に余白や枠を付けたり、名前と説明を横並びにしたりしやすくなります。

43
00:03:34.215 --> 00:03:37.060
ただし、ディブ自体に意味はありません。

44
00:03:37.060 --> 00:03:41.103
包んでも包まなくても、ディーエルの意味は変わりません。

45
00:03:41.103 --> 00:03:46.344
グループ化は装飾やレイアウトを助けるための工夫と理解しておきましょう。

46
00:03:46.344 --> 00:03:53.232
なお、この書き方は現在の仕様で認められたもので、古い解説と混同しないように注意してください。

47
00:03:53.232 --> 00:03:56.155
組み合わせの柔軟さも知っておきましょう。

48
00:03:56.155 --> 00:04:02.148
一つのディーティーに対して、説明を分けて複数のディーディーを続けることができます。

49
00:04:02.148 --> 00:04:09.749
逆に、別名のある用語のように、複数のディーティーに対して一つのディーディーを対応させる書き方も可能です。

50
00:04:09.749 --> 00:04:16.181
ただし、複雑にしすぎると、読み手がどの説明がどの名前に対応するのか分かりにくくなります。

51
00:04:16.181 --> 00:04:20.420
初心者のうちは、一つの名前に対して一つの説明という一対一の形を基本にし、

52
00:04:20.420 --> 00:04:24.659
必要な場面でのみ複数を組み合わせてください。

53
00:04:24.659 --> 00:04:30.652
実務では、読み手の理解しやすさを優先して、シンプルな構成を選ぶことがほとんどです。

54
00:04:30.652 --> 00:04:31.912
属性を確認します。

55
00:04:31.912 --> 00:04:36.112
ディーエルには、この記事で必須となる専用の属性はありません。

56
00:04:36.112 --> 00:04:41.292
必要に応じて、アイディー、クラス、ラングといったグローバル属性を使います。

57
00:04:41.292 --> 00:04:45.562
アイディーは文書内で一意な識別子、クラスはシーエスエスやスクリプトでまとめて選ぶための名前、

58
00:04:45.562 --> 00:04:49.832
ラングは内容の言語を示します。

59
00:04:49.832 --> 00:04:55.572
データ属性で独自の値を保持することもできますが、秘密情報を置く場所ではありません。

60
00:04:55.572 --> 00:05:02.292
子要素であるディーティーやディーディーの属性と混同せず、ディーエル自体には控えめに付けましょう。

61
00:05:02.292 --> 00:05:08.312
必要な場面が来るまでは、属性を付けずにシンプルに書いておくのが初心者にはおすすめです。

62
00:05:08.312 --> 00:05:11.057
他の要素との使い分けを確認します。

63
00:05:11.057 --> 00:05:16.063
順番に意味のない箇条書きはユーエル、手順など順番に意味があるものはオーエル、

64
00:05:16.063 --> 00:05:21.069
行と列で比較するデータはテーブルが適しています。

65
00:05:21.069 --> 00:05:26.883
ディーエルは、そのどれでもない、名前と説明の組専用と考えると迷いません。

66
00:05:26.883 --> 00:05:31.889
見た目については、ディーディーが少し字下げされるのが標準の表示ですが、色や余白、

67
00:05:31.889 --> 00:05:36.895
横並びなどの装飾はシーエスエスで調整します。

68
00:05:36.895 --> 00:05:42.870
意味はエイチティーエムエル、見た目はシーエスエスという分担を守りましょう。

69
00:05:42.870 --> 00:05:50.460
迷ったときは、その情報が名前と説明の組なのか、それとも単なる一覧なのかを自問してみてください。

70
00:05:50.460 --> 00:05:52.337
ブラウザー互換性を確認します。

71
00:05:52.337 --> 00:05:57.342
記事が参照するエムディーエヌのデータでは、ディーエル要素は、クロームが一以降、

72
00:05:57.342 --> 00:06:02.347
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。

73
00:06:02.347 --> 00:06:06.476
古くからすべての主要ブラウザーで使える、安心な基本要素の一つです。

74
00:06:06.476 --> 00:06:11.419
対応自体を心配する必要はほぼありませんが、三百二十ピクセル程度の狭い画面や、

75
00:06:11.419 --> 00:06:16.361
文字を拡大したときにも、名前と説明の対応が読み取りやすいかは確認しておきましょう。

76
00:06:16.361 --> 00:06:18.363
実機でのチェックもおすすめです。

77
00:06:18.363 --> 00:06:23.368
新しい属性や実験的な機能を使う場合とは違い、要素そのものの対応は安定しています。

78
00:06:23.368 --> 00:06:26.111
最後に、よくある間違いとまとめです。

79
00:06:26.111 --> 00:06:32.970
一つ目は、ディーエルの中にディーティーとディーディー以外のものを直接置いてしまうことです。

80
00:06:32.970 --> 00:06:41.047
二つ目は、見た目が二列だからという理由だけでディーエルを選び、比較が目的なのにテーブルを使わないことです。

81
00:06:41.047 --> 00:06:49.582
三つ目は、ディーディーを先に書いて順番を逆にしたり、ディーエルで囲まずにディーティーだけを置いたりすることです。

82
00:06:49.582 --> 00:06:53.849
ディーエルは、名前と値の組全体をまとめる説明リストです。

83
00:06:53.849 --> 00:06:59.183
ディーティー、ディーディーとの三点セットを意識して使ってみてください。

84
00:06:59.183 --> 00:07:00.555
お疲れさまでした。

85
00:07:00.555 --> 00:07:06.956
練習として、用語を二つ並べた小さな用語集を一つ作ってみると、理解がぐっと深まります。