WEBVTT

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

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

3
00:00:03.656 --> 00:00:08.125
エイチティーエムエルタグ編の八十七本目は、ディーエフエヌタグです。

4
00:00:08.125 --> 00:00:12.323
ディーエフエヌは、英語のデフィニション、つまり定義から来た名前で、その用語を今ここで定義している、

5
00:00:12.323 --> 00:00:16.521
ということを示す要素です。

6
00:00:16.521 --> 00:00:22.479
たとえば入門記事で初めて専門用語を紹介するとき、その言葉自体をディーエフエヌで囲みます。

7
00:00:22.479 --> 00:00:28.709
重要なのは、ディーエフエヌが囲むのは用語だけで、意味の説明そのものは前後の文章に書く点です。

8
00:00:28.709 --> 00:00:32.500
今回は、使う場面、書き方、タイトル属性、略語タグとの組み合わせ、よくある間違いまで、

9
00:00:32.500 --> 00:00:36.292
順番に確認していきましょう。

10
00:00:36.292 --> 00:00:38.048
使う場面を整理します。

11
00:00:38.048 --> 00:00:45.073
ディーエフエヌがふさわしいのは、用語が初めて登場し、その場で意味を定義している箇所です。

12
00:00:45.073 --> 00:00:51.938
記事が強調しているのもこの点で、専門用語が出てくるたびに何度も囲むものではありません。

13
00:00:51.938 --> 00:00:56.248
たとえば同じページの中で、セレクターという言葉を二回目、三回目に使うときは、

14
00:00:56.248 --> 00:01:00.559
普通の文章として書けば十分です。

15
00:01:00.559 --> 00:01:05.668
逆に、定義もせずにディーエフエヌだけを置いても意味がありません。

16
00:01:05.668 --> 00:01:11.256
定義とは、用語と、その意味を説く文章がそろって初めて成り立つからです。

17
00:01:11.256 --> 00:01:18.440
用語を囲んだら、その直後に、とは何々です、という説明が続いているかを必ず確認してください。

18
00:01:18.440 --> 00:01:20.567
基本の書き方を確認します。

19
00:01:20.567 --> 00:01:25.474
ディーエフエヌは、開始タグと終了タグで用語を囲んで書きます。

20
00:01:25.474 --> 00:01:30.873
スライドの例では、セレクターという用語だけを囲み、その後に、とは、シーエスエスを適用する要素を選ぶ指定です、

21
00:01:30.873 --> 00:01:36.271
と定義の文章が続きます。

22
00:01:36.271 --> 00:01:38.234
囲む範囲がポイントです。

23
00:01:38.234 --> 00:01:44.451
説明文まで全部を囲んでしまうと、どこが定義対象の用語なのかが曖昧になります。

24
00:01:44.451 --> 00:01:47.886
用語は短く、説明は外に、これが基本形です。

25
00:01:47.886 --> 00:01:55.902
多くのブラウザーでは、ディーエフエヌの文字は斜体で表示されますが、これは見た目の目安にすぎません。

26
00:01:55.902 --> 00:02:04.572
太字や斜体にしたいだけならシーエスエスを使い、定義という意味があるときだけディーエフエヌを選んでください。

27
00:02:04.572 --> 00:02:06.918
記事の活用事例を読み解きます。

28
00:02:06.918 --> 00:02:09.420
例は二つの段落からできています。

29
00:02:09.420 --> 00:02:14.580
一つ目の段落でセレクターをディーエフエヌで囲み、初めて定義します。

30
00:02:14.580 --> 00:02:22.086
二つ目の段落では、セレクターには要素名やクラス名などがあります、と普通の文章として使っています。

31
00:02:22.086 --> 00:02:25.995
定義は一度だけ、という使い分けがよく分かる例です。

32
00:02:25.995 --> 00:02:32.406
試すときは、練習用ファイルのボディにこの例を写し、保存して再読み込みしてください。

33
00:02:32.406 --> 00:02:37.254
そのうえで開発者ツールのエレメンツで、ディーエフエヌが段落の中に正しく入っているか、

34
00:02:37.254 --> 00:02:42.102
入れ子が崩れていないかを確認しましょう。

35
00:02:42.102 --> 00:02:46.480
見た目の斜体だけに頼らず、構造で確かめる習慣が大切です。

36
00:02:46.480 --> 00:02:48.425
タイトル属性についてです。

37
00:02:48.425 --> 00:02:52.691
ディーエフエヌにタイトル属性を付けると、その値が用語の正式な定義として扱われる、

38
00:02:52.691 --> 00:02:56.956
という少し特別な決まりがあります。

39
00:02:56.956 --> 00:03:01.445
スライドのように、タイトルに定義文を入れる書き方も可能です。

40
00:03:01.445 --> 00:03:06.384
ただし記事が注意している通り、タイトル属性の内容は、タッチ操作では表示されなかったり、

41
00:03:06.384 --> 00:03:11.322
支援技術で常に伝わるとは限らなかったりします。

42
00:03:11.322 --> 00:03:15.662
つまり、タイトルだけに大切な説明を閉じ込めてはいけません。

43
00:03:15.662 --> 00:03:22.696
基本は、本文の文章で誰にでも読める形で定義を書き、タイトルはあくまで補足と位置づけてください。

44
00:03:22.696 --> 00:03:25.988
この考え方は、後で学ぶ略語タグでも同じです。

45
00:03:25.988 --> 00:03:28.018
略語との組み合わせを見ます。

46
00:03:28.018 --> 00:03:33.673
定義する用語が略語の場合は、エービービーアールタグと組み合わせるのが定番です。

47
00:03:33.673 --> 00:03:39.907
書き方は、略語そのものをエービービーアールで囲み、その外側をディーエフエヌで包みます。

48
00:03:39.907 --> 00:03:44.837
そして正式名称は、内側のエービービーアールのタイトル属性に書きます。

49
00:03:44.837 --> 00:03:51.797
この場合、外側のディーエフエヌにタイトルは不要で、内側のタイトルがそのまま定義として扱われます。

50
00:03:51.797 --> 00:03:57.306
たとえばエイチティーエムエルを初めて紹介する文章なら、この形がぴったりです。

51
00:03:57.306 --> 00:04:01.221
入れ子の順番を逆にしないこと、そして正式名称と定義の文章を本文にも用意することが、

52
00:04:01.221 --> 00:04:05.136
読み手への配慮になります。

53
00:04:05.136 --> 00:04:09.546
関連する要素として、用語リストとの関係も知っておきましょう。

54
00:04:09.546 --> 00:04:16.456
ディーエルは用語と説明を組にするリストで、ディーティーが用語の欄、ディーディーが説明の欄です。

55
00:04:16.456 --> 00:04:22.043
このディーティーの中で、定義対象の用語にディーエフエヌを使うこともできます。

56
00:04:22.043 --> 00:04:28.511
スライドの例では、セレクターをディーティーの中で囲み、説明をディーディーに分けています。

57
00:04:28.511 --> 00:04:34.980
文章の中で定義するなら段落、用語集のように並べるならディーエル、と場面で選んでください。

58
00:04:34.980 --> 00:04:38.655
なお、同じ用語の定義は文書の中で原則一度だけです。

59
00:04:38.655 --> 00:04:45.124
複数の場所で別々に定義すると、読み手もプログラムも、どれが正式な定義か迷ってしまいます。

60
00:04:45.124 --> 00:04:47.761
共通属性とシーエスエスを確認します。

61
00:04:47.761 --> 00:04:53.035
ディーエフエヌにも、アイディーやクラス、ラングなどの共通属性が使えます。

62
00:04:53.035 --> 00:05:00.067
アイディーを付けておけば、ほかの場所から、その用語の定義へページ内リンクで飛ばすこともできます。

63
00:05:00.067 --> 00:05:02.704
用語集ページでは特に便利な工夫です。

64
00:05:02.704 --> 00:05:09.296
見た目については、多くのブラウザーが初期状態で斜体にしますが、シーエスエスで変えられます。

65
00:05:09.296 --> 00:05:16.621
スライドのようにフォントスタイルをノーマルにして太字にすれば、本文の中で用語が見つけやすくなります。

66
00:05:16.621 --> 00:05:26.144
ただし、色や太さだけで定義だと伝えるのではなく、ディーエフエヌという意味の土台があってこその装飾だという順序を忘れないでください。

67
00:05:26.144 --> 00:05:28.158
ブラウザー互換性を確認します。

68
00:05:28.158 --> 00:05:33.796
記事が紹介するエムディーエヌのデータでは、ディーエフエヌ要素本体は、クロームが十五以降、

69
00:05:33.796 --> 00:05:39.435
エッジが十二以降、ファイアフォックスが一以降、サファリが六以降で対応しています。

70
00:05:39.435 --> 00:05:46.014
どれもかなり古いバージョンから使えており、現在広く使われているブラウザーなら問題なく採用できます。

71
00:05:46.014 --> 00:05:52.323
注意点として、この表は要素本体の対応であり、属性や細かな表示までを保証するものではありません。

72
00:05:52.323 --> 00:05:57.224
モバイル版も含め、実際の対象環境では、三百二十ピクセル程度の狭い画面や文字拡大でも、

73
00:05:57.224 --> 00:06:02.124
用語と説明が読みにくくならないかを合わせて確認すると安心です。

74
00:06:02.124 --> 00:06:04.920
よくある間違いを三つ挙げます。

75
00:06:04.920 --> 00:06:11.259
一つ目は、用語が登場するたびにディーエフエヌで囲んでしまうことです。

76
00:06:11.259 --> 00:06:14.801
定義は最初の説明の場所だけが対象です。

77
00:06:14.801 --> 00:06:20.393
二つ目は、説明の文章なしでディーエフエヌだけを置くことです。

78
00:06:20.393 --> 00:06:25.613
用語だけが斜体になっても、読み手には意味が伝わりません。

79
00:06:25.613 --> 00:06:30.646
三つ目は、文字を斜体にしたいだけの理由で使うことです。

80
00:06:30.646 --> 00:06:34.748
それは意味の誤用で、シーエスエスの役割です。

81
00:06:34.748 --> 00:06:39.781
また、用語のつづりの一部だけを囲ったり、リンクの中身全体を安易に囲ったりすると、

82
00:06:39.781 --> 00:06:44.814
定義対象がずれてしまいます。

83
00:06:44.814 --> 00:06:51.712
囲む前に、ここは本当に定義の場所か、と一度立ち止まることが確実な対策です。

84
00:06:51.712 --> 00:06:52.665
まとめです。

85
00:06:52.665 --> 00:06:57.427
ディーエフエヌは、その用語を定義している箇所を示す要素です。

86
00:06:57.427 --> 00:07:00.444
最後にチェックリストで確認しましょう。

87
00:07:00.444 --> 00:07:03.937
まず、その場所で本当に用語を定義しているか。

88
00:07:03.937 --> 00:07:09.017
次に、囲んでいるのは用語だけで、説明は前後の文章に書けているか。

89
00:07:09.017 --> 00:07:15.527
そして、略語ならエービービーアールと組み合わせ、タイトル属性だけに頼っていないか。

90
00:07:15.527 --> 00:07:23.465
この三点がそろえば、読み手にも、検索や支援技術などのプログラムにも、ここが定義だと正しく伝わります。

91
00:07:23.465 --> 00:07:28.386
小さなタグですが、文章の意味を正確にする大切な役割があります。

92
00:07:28.386 --> 00:07:31.879
ぜひ用語集や入門記事で活用してみてください。

93
00:07:31.879 --> 00:07:35.372
これでディーエフエヌタグの解説を終わります。