WEBVTT

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

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

3
00:00:03.686 --> 00:00:08.465
エイチティーエムエルタグ編の百十二本目は、エービービーアール要素です。

4
00:00:08.465 --> 00:00:10.240
これは略語を示すタグです。

5
00:00:10.240 --> 00:00:13.790
エイチティーエムエル、シーエスエス、ユーアールエル。

6
00:00:13.790 --> 00:00:17.476
ウェブの文章には、短く略した言葉がたくさん出てきます。

7
00:00:17.476 --> 00:00:21.982
初めて読む人には、その略語が何の略なのか分からないこともあります。

8
00:00:21.982 --> 00:00:28.399
エービービーアールは、そうした言葉が略語であることを示し、正式名称と結び付けるための要素です。

9
00:00:28.399 --> 00:00:32.290
今回は、タイトル属性の使い方、ディーエフエヌとの組み合わせ、コード例、互換性、

10
00:00:32.290 --> 00:00:36.181
よくある間違いまで順番に確認します。

11
00:00:36.181 --> 00:00:42.052
この動画では要点だけを初心者向けに整理しますので、初めての方も安心して聞いてください。

12
00:00:42.052 --> 00:00:44.876
エービービーアールを使う場面を考えます。

13
00:00:44.876 --> 00:00:51.089
たとえば技術記事で、エイチティーエムエルやシーエスエスといった略称を初めて出すときです。

14
00:00:51.089 --> 00:00:57.726
あるいは組織名や製品名を、長い正式名称の代わりに短い頭字語で繰り返し書くときも当てはまります。

15
00:00:57.726 --> 00:01:02.668
ポイントは、読み手がその略語の意味を知らない可能性があるかどうかです。

16
00:01:02.668 --> 00:01:07.752
誰もが知っている言葉や、略語ではない普通の単語まで囲む必要はありません。

17
00:01:07.752 --> 00:01:12.553
略称と正式名称を結び付けたい場所で使う、という視点を持ってください。

18
00:01:12.553 --> 00:01:17.354
たとえばニュースや解説記事でも、団体名を短く書く場面はよくあります。

19
00:01:17.354 --> 00:01:19.472
そういうときに役立つタグです。

20
00:01:19.472 --> 00:01:21.452
基本の書き方を確認します。

21
00:01:21.452 --> 00:01:27.544
エービービーアールには開始タグと終了タグがあり、その間に略語そのものを書きます。

22
00:01:27.544 --> 00:01:32.265
そして開始タグのタイトル属性に、その略語の正式名称を書きます。

23
00:01:32.265 --> 00:01:41.098
たとえば略語がエイチティーエムエルなら、タイトルにはハイパーテキストマークアップランゲージという正式名称を入れます。

24
00:01:41.098 --> 00:01:49.779
パソコンでは、略語にマウスを合わせると、この正式名称が小さな吹き出し、ツールチップとして表示されることがあります。

25
00:01:49.779 --> 00:01:51.911
書き方はとてもシンプルです。

26
00:01:51.911 --> 00:01:58.764
終了タグを書き忘れると、意図しない範囲まで略語として扱われることがあるので注意しましょう。

27
00:01:58.764 --> 00:02:01.667
ここがこのタグで一番大切な注意点です。

28
00:02:01.667 --> 00:02:08.543
記事も強調している通り、タイトル属性のツールチップは、タッチ操作や読み上げでは頼れません。

29
00:02:08.543 --> 00:02:16.489
スマートフォンではマウスを合わせる操作がありませんし、支援技術がタイトルを必ず読み上げるとも限りません。

30
00:02:16.489 --> 00:02:22.754
ですから、正式名称が重要な情報なら、タイトルだけに入れて終わりにしないでください。

31
00:02:22.754 --> 00:02:26.956
初出の場所では、本文の中にも正式名称を書き、そのあとで略語を使う形にすると、

32
00:02:26.956 --> 00:02:31.158
すべての読み手に確実に伝わります。

33
00:02:31.158 --> 00:02:39.256
迷ったときは、本文に正式名称を一度書いてから略語を使い始める、という順番を意識すると失敗しにくくなります。

34
00:02:39.256 --> 00:02:42.861
記事の活用事例をもとに、コードを読みます。

35
00:02:42.861 --> 00:02:50.072
この例では、段落の中でエイチティーエムエルという略語だけをエービービーアールで囲み、

36
00:02:50.072 --> 00:02:57.282
タイトル属性に正式名称であるハイパーテキストマークアップランゲージを指定しています。

37
00:02:57.282 --> 00:03:07.240
画面にはエイチティーエムエルとだけ表示されますが、パソコンでマウスを合わせると正式名称がツールチップで確認できます。

38
00:03:07.240 --> 00:03:12.047
段落全体ではなく、略語の部分だけを囲むのがポイントです。

39
00:03:12.047 --> 00:03:18.056
実際のページでは、扱う略語ごとに正しい正式名称を調べて書いてください。

40
00:03:18.056 --> 00:03:26.468
ブラウザーで保存して再読み込みし、表示とマウスを合わせたときの見え方を自分で確かめてみてください。

41
00:03:26.468 --> 00:03:31.009
関連する要素として、ディーエフエヌとの組み合わせを紹介します。

42
00:03:31.009 --> 00:03:35.403
ディーエフエヌは、その用語を定義している箇所を示す要素です。

43
00:03:35.403 --> 00:03:44.191
用語集や入門記事で、略語を初めて定義する場面では、この例のようにディーエフエヌの中にエービービーアールを入れて使います。

44
00:03:44.191 --> 00:03:48.731
タイトル属性には正式名称、周辺の文章には用語の説明を書きます。

45
00:03:48.731 --> 00:03:53.418
ただし、すべての略語にディーエフエヌが必要なわけではありません。

46
00:03:53.418 --> 00:03:59.717
定義している場所かどうかで判断し、単なる使用箇所ではエービービーアールだけで十分です。

47
00:03:59.717 --> 00:04:05.136
定義の文章が近くにあることで、辞書のように読み返しやすいページになります。

48
00:04:05.136 --> 00:04:07.096
属性について整理します。

49
00:04:07.096 --> 00:04:13.956
エービービーアールで中心になるのはタイトル属性で、正式名称などの補足情報を書きます。

50
00:04:13.956 --> 00:04:19.673
それ以外に専用の属性はなく、必要に応じてアイディーやクラス、ラングといったグローバル属性、

51
00:04:19.673 --> 00:04:25.390
つまり多くの要素で共通して使える属性を利用します。

52
00:04:25.390 --> 00:04:30.617
たとえば略語が外国語の場合は、ラングで言語を示すこともできます。

53
00:04:30.617 --> 00:04:35.191
繰り返しになりますが、タイトルは補足情報の置き場所です。

54
00:04:35.191 --> 00:04:40.908
読み手全員に必要な説明は本文に書く、という役割分担を意識してください。

55
00:04:40.908 --> 00:04:44.338
属性を増やすこと自体が目的ではありません。

56
00:04:44.338 --> 00:04:48.748
必要な情報だけを、決められた場所に書くことが基本です。

57
00:04:48.748 --> 00:04:52.923
もう一つの例として、複数の略語を並べる形を見ます。

58
00:04:52.923 --> 00:04:58.433
用語一覧の中で、エイチティーエムエル、シーエスエス、ユーアールエルという三つの略語に、

59
00:04:58.433 --> 00:05:03.944
それぞれ正式名称をタイトルで対応させています。

60
00:05:03.944 --> 00:05:11.124
略語ごとにタイトルを分けて書くこと、そして正式名称のつづりを正確に書くことが大切です。

61
00:05:11.124 --> 00:05:15.466
ただし先ほど学んだ通り、タイトルはあくまで補足です。

62
00:05:15.466 --> 00:05:20.058
本当に覚えてほしい用語なら、一覧の本文や説明文の中にも正式名称や意味を併記すると、

63
00:05:20.058 --> 00:05:24.650
より親切なページになります。

64
00:05:24.650 --> 00:05:31.496
この形は、学習用のまとめページや、社内の用語集を作るときにもそのまま応用できます。

65
00:05:31.496 --> 00:05:33.848
見た目についても触れておきます。

66
00:05:33.848 --> 00:05:40.024
エービービーアールは、多くのブラウザーで初期状態では点線の下線が付いて表示されます。

67
00:05:40.024 --> 00:05:46.640
これはブラウザーが用意した標準のスタイルで、略語であることを目でも伝えやすくする工夫です。

68
00:05:46.640 --> 00:05:52.374
気になる場合は、シーエスエスで下線の種類を変えたり消したりすることもできます。

69
00:05:52.374 --> 00:05:57.667
逆に、点線を付けたいだけの理由でエービービーアールを使うのは間違いです。

70
00:05:57.667 --> 00:06:03.989
意味を持つタグの選択と、見た目を整えるシーエスエスの指定は分けて考える習慣が大切です。

71
00:06:03.989 --> 00:06:10.164
最近はスマートフォンでの表示も多いので、線の見え方を実機でも確認しておくと安心です。

72
00:06:10.164 --> 00:06:12.363
ブラウザー互換性を確認します。

73
00:06:12.363 --> 00:06:18.665
記事が紹介するエムディーエヌのデータでは、エービービーアール要素本体は、

74
00:06:18.665 --> 00:06:24.968
クロームが二以降、エッジが十二以降、ファイアフォックスが一以降、サファリが四以降から対応しています。

75
00:06:24.968 --> 00:06:30.465
ファイアフォックスには補足条件があるとされていますが、古くからある基本要素なので、

76
00:06:30.465 --> 00:06:35.961
現在の主要ブラウザーであれば対応を心配する必要はほとんどありません。

77
00:06:35.961 --> 00:06:38.453
ただし、これは要素本体の対応です。

78
00:06:38.453 --> 00:06:44.316
タイトルの表示方法は環境で異なる点は、先ほどの注意と合わせて覚えておきましょう。

79
00:06:44.316 --> 00:06:51.352
モバイル向けのブラウザーでも基本動作は共通ですが、最終的には対象の実機で表示を試すのが確実です。

80
00:06:51.352 --> 00:06:54.945
まとめとして、よくある間違いを三つ挙げます。

81
00:06:54.945 --> 00:07:00.499
一つ目は、正式名称をタイトル属性だけに入れて終わってしまうことです。

82
00:07:00.499 --> 00:07:07.196
タッチ操作や読み上げでは伝わらない場合があるため、初出では本文にも書いてください。

83
00:07:07.196 --> 00:07:11.933
二つ目は、略語ではない普通の言葉まで囲んでしまうことです。

84
00:07:11.933 --> 00:07:15.199
三つ目は、正式名称のつづりの間違いです。

85
00:07:15.199 --> 00:07:19.120
せっかく補足しても内容が違えば逆効果になります。

86
00:07:19.120 --> 00:07:23.856
エービービーアールは、略語と正式名称を結び付ける要素です。

87
00:07:23.856 --> 00:07:27.776
初出で丁寧に伝え、その後は略語で読みやすくする。

88
00:07:27.776 --> 00:07:30.553
この使い分けを試してみてください。

89
00:07:30.553 --> 00:07:33.820
ぜひ手元のページでも試してみてください。

90
00:07:33.820 --> 00:07:35.780
これで解説を終わります。