WEBVTT

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

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

3
00:00:03.453 --> 00:00:07.418
エイチティーエムエルタグ編の九十本目は、ディーディータグです。

4
00:00:07.418 --> 00:00:12.278
ディーディーは、直前に書かれた用語に対応する、詳しい説明や値を示す要素です。

5
00:00:12.278 --> 00:00:17.649
辞書で例えるなら、見出し語が用語で、その意味を説いた本文がディーディーにあたります。

6
00:00:17.649 --> 00:00:24.811
単独で使うタグではなく、用語を示すディーティー、そして全体を包むディーエルと組み合わせて初めて意味が完成します。

7
00:00:24.811 --> 00:00:29.160
今回は、ディーディーの意味、三点セットの組み合わせ、使い方、コード例、ブラウザー互換性、

8
00:00:29.160 --> 00:00:33.508
よくある間違いまで、順番に確認していきましょう。

9
00:00:33.508 --> 00:00:36.395
まず、三点セットの関係を整理します。

10
00:00:36.395 --> 00:00:42.331
親要素のディーエルは、定義リストとも呼ばれ、用語と説明の組全体を包みます。

11
00:00:42.331 --> 00:00:48.908
その中で、ディーティーが用語や名前を示し、ディーディーがその説明や値を担当します。

12
00:00:48.908 --> 00:00:55.805
たとえば商品情報なら、項目名がディーティー、価格や仕様といった中身がディーディーです。

13
00:00:55.805 --> 00:00:59.334
よくある質問集、用語集、店舗情報の案内など、名前と値が対になる情報なら、

14
00:00:59.334 --> 00:01:02.863
幅広く使えます。

15
00:01:02.863 --> 00:01:07.676
表ほどの行列構造は要らないけれど、ただの箇条書きより対応関係をはっきりさせたい、

16
00:01:07.676 --> 00:01:12.488
そんな場面にちょうど合う組み合わせです。

17
00:01:12.488 --> 00:01:14.591
基本の書き方を確認します。

18
00:01:14.591 --> 00:01:20.092
この教材では、開始タグと終了タグを明示して、その間に説明を入れます。

19
00:01:20.092 --> 00:01:28.019
配置のルールが大切で、ディーディーは必ずディーエルの中に入れ、対応するディーティーの後に置きます。

20
00:01:28.019 --> 00:01:31.983
画面の例では、開催日という用語の後に日付、会場という用語の後に教室名と、

21
00:01:31.983 --> 00:01:35.946
二組が順番に並んでいます。

22
00:01:35.946 --> 00:01:41.285
順番を逆にしたり、ディーエルなしでディーディーだけを置いたりすると、ブラウザーが構造を補正して、

23
00:01:41.285 --> 00:01:46.624
意図と違う表示になることがあります。

24
00:01:46.624 --> 00:01:51.639
対応関係は前後の並びで決まる、という点を覚えておいてください。

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

26
00:01:54.154 --> 00:01:59.854
例では、参加条件という用語をディーティーに置き、その説明として、ブラウザーを操作できること、

27
00:01:59.854 --> 00:02:05.554
という文章をディーディーの中に入れています。

28
00:02:05.554 --> 00:02:11.254
注目したいのは、ディーディーの中にピータグで段落を入れている点です。

29
00:02:11.254 --> 00:02:16.786
説明が長くなるときは、このように段落としてきちんと構造化できます。

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

31
00:02:21.564 --> 00:02:26.342
保存して再読み込みしてください。

32
00:02:26.342 --> 00:02:32.713
開発者ツールのエレメンツで、入れ子が崩れていないかも合わせて確認しましょう。

33
00:02:32.713 --> 00:02:34.775
組み合わせの応用を確認します。

34
00:02:34.775 --> 00:02:41.234
一つの用語に対して、説明を二つに分けて書きたい場合は、ディーディーを複数続けることができます。

35
00:02:41.234 --> 00:02:48.519
画面の例では、エイチティーエムエルという一つの用語に、役割の説明と、具体的な働きの説明が二つ並んでいます。

36
00:02:48.519 --> 00:02:52.917
反対に、別々の呼び名を持つ同じ対象を説明する場合は、ディーティーを複数並べてから、

37
00:02:52.917 --> 00:02:57.315
共通のディーディーを一つ置く書き方もできます。

38
00:02:57.315 --> 00:03:05.699
記事が注意している通り、複数の説明を示すときほど、どの用語に対応しているのかが読み手に伝わる並びを崩さないことが大切です。

39
00:03:05.699 --> 00:03:07.920
ディーディーの中身についてです。

40
00:03:07.920 --> 00:03:15.554
ディーディーには、普通の文章だけでなく、段落、リンク、箇条書きなど、本文として自然な内容を幅広く入れられます。

41
00:03:15.554 --> 00:03:21.384
説明が長くなる用語集では、一段落目に要点、二段落目に補足、という書き分けも可能です。

42
00:03:21.384 --> 00:03:24.715
ただし、何でも詰め込んでよいわけではありません。

43
00:03:24.715 --> 00:03:28.671
説明があまりに長く複雑になるなら、その用語自体を独立した章に分けた方が、

44
00:03:28.671 --> 00:03:32.627
読み手にとって分かりやすい場合もあります。

45
00:03:32.627 --> 00:03:37.208
あくまで、用語への答えとして読める長さと構造を目安にしてください。

46
00:03:37.208 --> 00:03:41.511
対応する用語が一目で追えることが、定義リストらしさの条件です。

47
00:03:41.511 --> 00:03:42.714
属性についてです。

48
00:03:42.714 --> 00:03:46.857
ディーディーには、この記事で必須となる専用の属性はありません。

49
00:03:46.857 --> 00:03:53.272
必要に応じて、アイディー、クラス、ラングといった、多くの要素で使えるグローバル属性を利用します。

50
00:03:53.272 --> 00:04:00.623
クラスはシーエスエスで説明文の見た目を整えるとき、アイディーはページ内リンクやプログラムからの参照に使います。

51
00:04:00.623 --> 00:04:06.236
注意点は、ディーディー自身の属性と、その中に入れた子要素の属性を混同しないことです。

52
00:04:06.236 --> 00:04:10.914
たとえば中のリンクに付ける属性は、リンク側の書き方を確認してください。

53
00:04:10.914 --> 00:04:15.859
属性で見た目を付けても、要素の意味自体は変わらない点も覚えておきましょう。

54
00:04:15.859 --> 00:04:17.333
見た目を確認します。

55
00:04:17.333 --> 00:04:24.706
多くのブラウザーでは、ディーディーは用語よりも少し右にずらして、左側に余白を付けた形で表示されます。

56
00:04:24.706 --> 00:04:28.392
そのため、説明だと視覚的にも分かりやすくなります。

57
00:04:28.392 --> 00:04:33.552
ただし、この字下げの見た目だけを目的にディーディーを使うのは誤りです。

58
00:04:33.552 --> 00:04:36.501
意味はあくまで、用語への説明であること。

59
00:04:36.501 --> 00:04:41.809
余白の大きさや文字の色を変えたいときは、画面の例のようにシーエスエスで調整し、

60
00:04:41.809 --> 00:04:47.117
タグの選択は意味で、装飾はシーエスエスで、と分けて考えてください。

61
00:04:47.117 --> 00:04:54.047
横並びのレイアウトにしたい場合も、ディーエル側にフレックスやグリッドを指定する方法があります。

62
00:04:54.047 --> 00:04:56.106
ブラウザー互換性を確認します。

63
00:04:56.106 --> 00:05:00.865
記事が紹介するエムディーエヌのデータでは、ディーディー要素本体は、クロームが一以降、

64
00:05:00.865 --> 00:05:05.624
ファイアフォックスが一以降で補足条件付き、エッジが十二以降、サファリが四以前から対応している、

65
00:05:05.624 --> 00:05:10.383
非常に古くから使える要素です。

66
00:05:10.383 --> 00:05:12.991
実務では安心して使える部類と言えます。

67
00:05:12.991 --> 00:05:20.816
ただし、この表は要素本体の対応開始版を示すもので、周囲の装飾やレイアウトまで同じ表示を保証するものではありません。

68
00:05:20.816 --> 00:05:29.739
アイオーエス版サファリやアンドロイド版クロームなどモバイル環境も含め、利用対象の実機で一度表示を確かめる習慣は付けておきましょう。

69
00:05:29.739 --> 00:05:32.045
よくある間違いを三つ挙げます。

70
00:05:32.045 --> 00:05:38.503
一つ目は、ディーエルやディーティーを省いて、ディーディーだけを置いてしまうことです。

71
00:05:38.503 --> 00:05:42.808
対応する用語がなければ、説明だけが宙に浮いてしまいます。

72
00:05:42.808 --> 00:05:48.496
二つ目は、文章を右にずらしたいだけの理由でディーディーを流用することです。

73
00:05:48.496 --> 00:05:51.879
余白はシーエスエスで作るのが正しい方法です。

74
00:05:51.879 --> 00:05:57.721
三つ目は、説明の順番を入れ替えて、どの用語への説明か分からなくすることです。

75
00:05:57.721 --> 00:06:00.950
定義リストは前後の並びで対応が決まります。

76
00:06:00.950 --> 00:06:08.791
あわせて、三百二十ピクセル程度の小さい画面幅や文字拡大でも、内容が欠けずに読めるかを確認してください。

77
00:06:08.791 --> 00:06:09.736
まとめです。

78
00:06:09.736 --> 00:06:16.983
ディーディーは、直前のディーティーが示す用語や名前に対応する、説明や値を書くための要素です。

79
00:06:16.983 --> 00:06:19.976
最後にチェックリストで確認しましょう。

80
00:06:19.976 --> 00:06:26.907
まず、全体がディーエルで包まれ、ディーディーが対応するディーティーの後に置かれているか。

81
00:06:26.907 --> 00:06:32.736
次に、複数の説明がある場合でも、どの用語への説明か読み手に崩れず伝わるか。

82
00:06:32.736 --> 00:06:39.037
そして、字下げなどの見た目目的で流用せず、装飾はシーエスエスに分けられているか。

83
00:06:39.037 --> 00:06:43.133
この三点がそろえば、読みやすい定義リストになります。

84
00:06:43.133 --> 00:06:46.441
これでディーディータグの解説を終わります。

85
00:06:46.441 --> 00:06:51.009
ぜひ、用語集や店舗情報のページで実際に試してみてください。