WEBVTT

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

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

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

4
00:00:07.186 --> 00:00:10.779
ディーティーは、説明リストの中で、用語や名前を示す要素です。

5
00:00:10.779 --> 00:00:14.373
たとえば用語集で、エイチティーエムエルという言葉そのものを示すのがディーティー、

6
00:00:14.373 --> 00:00:17.966
その意味を説明する文がディーディーです。

7
00:00:17.966 --> 00:00:22.277
辞書で言えば、見出し語がディーティー、定義文がディーディーにあたります。

8
00:00:22.277 --> 00:00:26.230
今回は、この見出しとしての役割から、ディーエル、ディーディーとの組み合わせ、

9
00:00:26.230 --> 00:00:30.182
使い方、よくある間違いまで、順番に確認していきましょう。

10
00:00:30.182 --> 00:00:35.572
名前と説明が対になっている情報を見つけたとき、それがディーティーの出番だと思ってください。

11
00:00:35.572 --> 00:00:37.773
基本の書き方を確認します。

12
00:00:37.773 --> 00:00:45.055
ディーティーは、開始タグと終了タグの両方を書いて、その間に用語や名前を入れる要素です。

13
00:00:45.055 --> 00:00:48.272
大切なのは、単独では使わないことです。

14
00:00:48.272 --> 00:00:53.183
親要素として説明リストのディーエルを用意し、その中にディーティーを置き、

15
00:00:53.183 --> 00:00:58.094
直後に説明を担当するディーディーを続けます。

16
00:00:58.094 --> 00:01:06.900
画面の例では、エイチティーエムエルという用語をディーティーで示し、その説明をディーディーに書いています。

17
00:01:06.900 --> 00:01:12.996
この順番が、名前と説明の組を読み手にも機械にも正しく伝える基本の形です。

18
00:01:12.996 --> 00:01:18.584
終了タグを書き忘れないよう、開いたら必ず閉じる習慣を付けましょう。

19
00:01:18.584 --> 00:01:21.034
三つのタグの役割分担を整理します。

20
00:01:21.034 --> 00:01:24.780
ディーエルは、名前と値の組全体をまとめる入れ物です。

21
00:01:24.780 --> 00:01:27.806
ディーティーは、その中の名前や項目名です。

22
00:01:27.806 --> 00:01:31.985
ディーディーは、直前のディーティーに対応する説明や値です。

23
00:01:31.985 --> 00:01:39.622
料金表で言えば、受講料という項目名がディーティー、千二百円ではなく一万二千円という金額がディーディーです。

24
00:01:39.622 --> 00:01:44.882
見出しタグや段落で代用するのではなく、この三つを組で使うことで、用語と説明が対応しているという関係自体を、

25
00:01:44.882 --> 00:01:50.141
エイチティーエムエルとして表現できます。

26
00:01:50.141 --> 00:01:53.888
構造で意味を伝えることが、この組み合わせの狙いです。

27
00:01:53.888 --> 00:02:00.084
この対応関係が伝わることで、読み上げでも、検索でも、内容を正しく理解しやすくなります。

28
00:02:00.084 --> 00:02:02.505
記事の活用事例を読み解きます。

29
00:02:02.505 --> 00:02:07.266
例はとてもシンプルで、受講時間という項目名をディーティーに、九十分という値をディーディーに書いた、

30
00:02:07.266 --> 00:02:12.026
講座案内の一組です。

31
00:02:12.026 --> 00:02:16.384
何の数字なのかは、直前のディーティーが教えてくれます。

32
00:02:16.384 --> 00:02:20.983
試すときは、練習用ファイルのボディの適切な位置に、親のディーエルごとこの例を写し、

33
00:02:20.983 --> 00:02:25.582
保存して再読み込みしてください。

34
00:02:25.582 --> 00:02:35.265
そのうえで開発者ツールのエレメンツで、ディーティーとディーディーがディーエルの中に正しい順番で入っているかを確認します。

35
00:02:35.265 --> 00:02:39.784
表示が地味でも、構造が正しければ目的は達成されています。

36
00:02:39.784 --> 00:02:42.925
ディーティーの使い道は、用語集だけではありません。

37
00:02:42.925 --> 00:02:46.067
名前と値の組で表せる情報なら、幅広く応用できます。

38
00:02:46.067 --> 00:02:49.396
たとえばイベント案内では、開催日を持ち物といった項目名をディーティーに、

39
00:02:49.396 --> 00:02:52.726
日付や内容をディーディーにします。

40
00:02:52.726 --> 00:02:58.255
よくある質問では、質問文をディーティー、回答をディーディーにする書き方もよく見られます。

41
00:02:58.255 --> 00:03:04.286
逆に、順番に意味のある手順は順序リスト、順番に意味のない箇条書きは箇条書きリストが向いています。

42
00:03:04.286 --> 00:03:09.689
内容が名前と説明の組になっているかどうかが、ディーティーを選ぶかどうかの判断基準です。

43
00:03:09.689 --> 00:03:15.092
段落や表で書く方が分かりやすい場合もありますので、無理にリスト化しない判断も大切です。

44
00:03:15.092 --> 00:03:19.706
少し進んだ書き方として、組み合わせの柔軟さを知っておきましょう。

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

46
00:03:25.618 --> 00:03:31.098
また、複数のディーティーに対して、一つのディーディーが対応する形も書けます。

47
00:03:31.098 --> 00:03:36.145
たとえば別名のある用語では、二つの名前を並べて一つの説明につなげます。

48
00:03:36.145 --> 00:03:43.643
ただし、柔軟だからといって複雑にしすぎると、読み手がどの説明がどの名前に対応するのか追いにくくなります。

49
00:03:43.643 --> 00:03:48.401
初心者のうちは、一つのディーティーに一つのディーディーという一対一の形を基本にし、

50
00:03:48.401 --> 00:03:53.160
必要なときだけ複数を組み合わせるのがおすすめです。

51
00:03:53.160 --> 00:03:57.726
見た目を整えるときに知っておくと便利なのが、グループ化です。

52
00:03:57.726 --> 00:04:06.858
現在のエイチティーエムエルでは、ディーエルの中で、ディーティーとディーディーの組をディブで包む書き方が認められています。

53
00:04:06.858 --> 00:04:15.229
これにより、組ごとに枠を付けたり、名前と説明を横並びにしたりといった、シーエスエスでの調整がしやすくなります。

54
00:04:15.229 --> 00:04:18.882
ただし、これは見た目のための補助的な使い方です。

55
00:04:18.882 --> 00:04:23.753
ディブで包まない基本形でも意味はまったく同じですし、包む場合も順番はディーティーが先、

56
00:04:23.753 --> 00:04:28.623
ディーディーが後という原則は変わりません。

57
00:04:28.623 --> 00:04:32.428
まずは基本形を正しく書けることを優先してください。

58
00:04:32.428 --> 00:04:33.874
属性を確認します。

59
00:04:33.874 --> 00:04:38.856
ディーティーには、この記事で必須となる専用の属性はありません。

60
00:04:38.856 --> 00:04:44.321
必要に応じて、アイディー、クラス、ラングといった共通属性を使います。

61
00:04:44.321 --> 00:04:51.071
アイディーは文書内で一意な識別子で、ページ内リンクやスクリプトからの参照に使います。

62
00:04:51.071 --> 00:04:57.178
クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。

63
00:04:57.178 --> 00:05:01.999
ラングは内容の言語を示し、日本語ならジェーエーを指定します。

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

65
00:05:08.588 --> 00:05:13.088
属性は補助ですので、必要なときだけ控えめに加えましょう。

66
00:05:13.088 --> 00:05:16.168
見た目とシーエスエスの関係を確認します。

67
00:05:16.168 --> 00:05:24.022
ディーティーは、多くのブラウザーで標準では太字で表示され、ディーディーは少し字下げされて表示されます。

68
00:05:24.022 --> 00:05:26.948
ただし、これはあくまで初期の表示です。

69
00:05:26.948 --> 00:05:32.338
色を付けたり、余白を調整したりしたいときは、シーエスエスで指定します。

70
00:05:32.338 --> 00:05:34.648
ここで大切なのは逆の視点です。

71
00:05:34.648 --> 00:05:39.576
文字を太字にしたいだけの理由でディーティーを使ってはいけません。

72
00:05:39.576 --> 00:05:43.734
ディーティーは、説明対象の名前であるときだけ選びます。

73
00:05:43.734 --> 00:05:48.585
意味はエイチティーエムエルで、見た目はシーエスエスで、という役割分担を守ることが、

74
00:05:48.585 --> 00:05:53.436
読みやすく保守しやすいページにつながります。

75
00:05:53.436 --> 00:05:55.608
ブラウザー互換性を確認します。

76
00:05:55.608 --> 00:06:02.703
記事が参照するエムディーエヌのデータでは、ディーティー要素は、クロームが一以降、

77
00:06:02.703 --> 00:06:09.798
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、主要ブラウザーで非常に古くから対応しています。

78
00:06:09.798 --> 00:06:14.142
新しい機能ではないため、対応を心配する必要はほぼありません。

79
00:06:14.142 --> 00:06:18.848
ただし、スマートフォンの小さな画面や文字を拡大した表示でも、名前と説明の対応が読み取りやすいかは、

80
00:06:18.848 --> 00:06:23.554
自分の目で確認しておきましょう。

81
00:06:23.554 --> 00:06:30.794
三百二十ピクセル程度の幅でも内容が欠けないかをチェックするのが、記事でも勧められている確認方法です。

82
00:06:30.794 --> 00:06:37.744
モバイル版のブラウザーでは表示のされ方が異なる場合もあるため、実機でも一度試しておくと安心です。

83
00:06:37.744 --> 00:06:40.518
最後に、よくある間違いとまとめです。

84
00:06:40.518 --> 00:06:46.375
一つ目は、親のディーエルを忘れて、ディーティーを単独で置いてしまうことです。

85
00:06:46.375 --> 00:06:49.766
ディーティーは必ずディーエルの中で使います。

86
00:06:49.766 --> 00:06:54.852
二つ目は、見出しの代わりや、太字にしたいだけの理由で使うことです。

87
00:06:54.852 --> 00:06:58.859
章の見出しにはエイチツーなどの見出しタグを使います。

88
00:06:58.859 --> 00:07:03.791
三つ目は、ディーディーを先に書いて順番を逆にしてしまうことです。

89
00:07:03.791 --> 00:07:06.103
名前が先、説明が後が原則です。

90
00:07:06.103 --> 00:07:10.881
ディーティーは、説明リストの中で用語や名前を示す見出し役です。

91
00:07:10.881 --> 00:07:18.433
ディーエル、ディーティー、ディーディーの三点セットを意識して、練習ページで一組書いてみてください。

92
00:07:18.433 --> 00:07:19.820
お疲れさまでした。