WEBVTT

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

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

3
00:00:03.459 --> 00:00:06.918
エイチティーエムエルタグ編の百六本目は、ビータグです。

4
00:00:06.918 --> 00:00:11.017
ビーは、文章の中で読者の注意を向けたい文字を囲むための要素です。

5
00:00:11.017 --> 00:00:14.988
キーワードや製品名など、ここを見てほしいという部分に使います。

6
00:00:14.988 --> 00:00:22.162
ブラウザーでは通常、太字で表示されるため、見た目だけを見ると大切なことを強調しているように感じるかもしれません。

7
00:00:22.162 --> 00:00:24.852
しかし、ビータグ自体は重要性を示しません。

8
00:00:24.852 --> 00:00:26.517
ここが最大のポイントです。

9
00:00:26.517 --> 00:00:30.745
今回は、ビーの意味、ストロングやイーエムとの使い分け、基本の書き方とコード例、

10
00:00:30.745 --> 00:00:34.972
ブラウザー互換性、よくある間違いまで順番に確認します。

11
00:00:34.972 --> 00:00:39.497
なぜ、重要でないのに注意を向ける必要があるのでしょうか。

12
00:00:39.497 --> 00:00:45.152
長い文章を読むとき、人は最初から最後まで一文字ずつ読むとは限りません。

13
00:00:45.152 --> 00:00:50.162
まず全体を眺めて、大事な語句を拾いながら読むことが多いのです。

14
00:00:50.162 --> 00:00:57.433
そこで、用語のキーワードや製品名が太字になっていると、知りたい言葉を素早く見つけられます。

15
00:00:57.433 --> 00:01:03.574
記事でも、ビーはキーワードなど読者の注意を向けたい文字だと説明されています。

16
00:01:03.574 --> 00:01:11.492
たとえば学習記事で、今回学ぶ用語だけを太くしておけば、あとから見返したときにも探しやすくなります。

17
00:01:11.492 --> 00:01:16.339
重要かどうかの判断とは別に、探しやすさや読みやすさを助ける。

18
00:01:16.339 --> 00:01:18.440
それがビータグの役割です。

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

20
00:01:20.500 --> 00:01:24.938
ビーは、開始タグと終了タグで対象の文字を囲んで使います。

21
00:01:24.938 --> 00:01:29.851
空要素ではないので、終了タグを書き忘れないようにしてください。

22
00:01:29.851 --> 00:01:33.496
置き場所は、段落の中など、文章の流れの中です。

23
00:01:33.496 --> 00:01:41.262
段落そのものを作る要素ではなく、文の一部分だけを目立たせるためのインライン要素だと考えてください。

24
00:01:41.262 --> 00:01:48.394
画面の例は、ピータグで作った一文の中の、ボックスモデルという言葉だけをビーで囲んだ形です。

25
00:01:48.394 --> 00:01:52.990
文全体ではなく、注意を向けたい語句だけを囲むのが基本です。

26
00:01:52.990 --> 00:01:58.220
囲む範囲が広すぎると、どこに注目すればよいのか分からなくなります。

27
00:01:58.220 --> 00:02:01.548
短く、的を絞って使うことを意識しましょう。

28
00:02:01.548 --> 00:02:06.102
記事の活用事例をもとに、コード例をもう少し詳しく見ます。

29
00:02:06.102 --> 00:02:12.771
一行目はピータグの文章で、ボックスモデルというキーワードだけをビーで囲んでいます。

30
00:02:12.771 --> 00:02:20.416
ブラウザーで表示すると、その語句だけが太字になり、文章を流し読みしても目に入りやすくなります。

31
00:02:20.416 --> 00:02:24.807
二行目も同じ考え方で、次に学ぶ用語を太字にしています。

32
00:02:24.807 --> 00:02:34.892
練習するときは、エイチティーエムエル入門で作ったファイルをコピーし、段落の中のキーワードを一つだけビーで囲ってみてください。

33
00:02:34.892 --> 00:02:40.910
保存して再読み込みし、太字になった部分と、ほかの文章との違いを確認します。

34
00:02:40.910 --> 00:02:47.416
開発者ツールで要素を確認し、意図した範囲だけが囲まれているかも見ておきましょう。

35
00:02:47.416 --> 00:02:51.267
最も大切な使い分けが、ストロングとの違いです。

36
00:02:51.267 --> 00:02:58.634
ストロングは、その内容が重要である、重大である、あるいは緊急であるという意味を持ちます。

37
00:02:58.634 --> 00:03:04.495
警告文や、絶対に見落としてほしくない注意事項にはストロングを使います。

38
00:03:04.495 --> 00:03:07.341
一方、ビーは重要性を意味しません。

39
00:03:07.341 --> 00:03:11.193
単に、読者の目を向けたいだけの語句に使います。

40
00:03:11.193 --> 00:03:16.885
記事でも、内容の重要性を示すならストロングを選ぶと説明されています。

41
00:03:16.885 --> 00:03:22.076
どちらも標準では太字で表示されるため、見た目はよく似ています。

42
00:03:22.076 --> 00:03:29.276
しかし、読み上げソフトや検索プログラムなど、機械が意味を読み取る場面では違いが出ます。

43
00:03:29.276 --> 00:03:36.476
太くしたいからビー、ではなく、この言葉は本当に重要かどうかを先に考えることが大切です。

44
00:03:36.476 --> 00:03:40.412
ビーと似た場面で候補になるタグは、ほかにもあります。

45
00:03:40.412 --> 00:03:47.829
イーエムは、文の中で強調して読む部分を示し、強調する場所によって意味が変わるような箇所に使います。

46
00:03:47.829 --> 00:03:54.944
アイは、専門用語や船の名前、考えている内容など、通常の本文とは性質が異なる文字を示すタグです。

47
00:03:54.944 --> 00:04:02.362
マークは、検索キーワードに一致した部分など、その文脈で関連性が高い部分を目立たせるために使います。

48
00:04:02.362 --> 00:04:07.357
どれも見た目が変わるタグですが、担っている意味はそれぞれ違います。

49
00:04:07.357 --> 00:04:14.169
迷ったときは、見た目ではなく、この文字はなぜ目立つのか、その理由を言葉にしてみてください。

50
00:04:14.169 --> 00:04:18.408
理由が単に注意を向けたいだけなら、ビーが候補になります。

51
00:04:18.408 --> 00:04:20.812
ビーが活躍する場面を整理します。

52
00:04:20.812 --> 00:04:24.419
一つ目は、説明文や学習記事の中のキーワードです。

53
00:04:24.419 --> 00:04:30.731
これから説明する用語を最初に太字で示しておくと、読者は話の中心を掴みやすくなります。

54
00:04:30.731 --> 00:04:34.789
二つ目は、レビューの文章の中の製品名やサービス名です。

55
00:04:34.789 --> 00:04:40.800
感想の中で対象の名前が目立つと、どの製品についての評価なのかが一目で分かります。

56
00:04:40.800 --> 00:04:42.904
三つ目は、記事の導入文です。

57
00:04:42.904 --> 00:04:48.464
あとで詳しく扱う語句を先に目立たせておくことで、読む前の心構えを作れます。

58
00:04:48.464 --> 00:04:52.747
いずれも共通するのは、その言葉自体が警告のように重要なのではなく、探しやすく、

59
00:04:52.747 --> 00:04:57.030
目に入りやすくしたいという目的です。

60
00:04:57.030 --> 00:05:00.787
その目的に合っているかを確かめてから使いましょう。

61
00:05:00.787 --> 00:05:02.246
属性を確認します。

62
00:05:02.246 --> 00:05:05.649
ビーには、この要素専用の属性はありません。

63
00:05:05.649 --> 00:05:09.863
記事でも、必須となる専用の属性はないとされています。

64
00:05:09.863 --> 00:05:14.725
必要に応じて使うのは、多くの要素で共通のグローバル属性です。

65
00:05:14.725 --> 00:05:19.993
アイディーは文書の中で一意の識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、

66
00:05:19.993 --> 00:05:25.260
ラングは内容の言語を示します。

67
00:05:25.260 --> 00:05:29.636
たとえばキーワードというクラスを付けておけば、シーエスエスで太字に加えて色も変える、

68
00:05:29.636 --> 00:05:34.012
といった調整ができます。

69
00:05:34.012 --> 00:05:39.847
ただし、クラスを付けたからといって要素の意味が変わるわけではありません。

70
00:05:39.847 --> 00:05:42.926
あくまで見た目や処理のための目印です。

71
00:05:42.926 --> 00:05:48.599
意味はタグで、見た目はシーエスエスで、という分担を忘れないでください。

72
00:05:48.599 --> 00:05:51.194
シーエスエスとの関係も押さえておきます。

73
00:05:51.194 --> 00:05:55.604
ビーが太字で表示されるのは、ブラウザーが標準で用意している表示です。

74
00:05:55.604 --> 00:06:01.183
そのため、シーエスエスでフォントウェイトや文字色を指定すれば、太さや色は変更できます。

75
00:06:01.183 --> 00:06:05.334
逆に考えると、ビーを使わなくても、スパンのような意味を持たない要素にフォントウェイトを指定すれば、

76
00:06:05.334 --> 00:06:09.485
文字を太くすることはできます。

77
00:06:09.485 --> 00:06:15.063
記事でも、太さだけを変えたい場合はスパンとフォントウェイトで表せると紹介されています。

78
00:06:15.063 --> 00:06:19.993
選び方の基準は、キーワードとして注意を向けたいという意味があるかどうかです。

79
00:06:19.993 --> 00:06:23.625
意味があるならビー、単なる装飾ならスパンとシーエスエス。

80
00:06:23.625 --> 00:06:26.739
こう分けて考えると、マークアップが整理されます。

81
00:06:26.739 --> 00:06:28.746
ブラウザー互換性を確認します。

82
00:06:28.746 --> 00:06:34.031
記事が紹介するエムディーエヌのデータでは、ビー要素本体は、クロームが一以降、

83
00:06:34.031 --> 00:06:39.316
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降から対応しています。

84
00:06:39.316 --> 00:06:43.396
いずれも非常に古いバージョンから対応しており、現在の主要ブラウザーでビーが表示できない場面は、

85
00:06:43.396 --> 00:06:47.477
まず考えなくてよいでしょう。

86
00:06:47.477 --> 00:06:49.083
安心して使える要素です。

87
00:06:49.083 --> 00:06:53.364
ただし、互換性に問題がないことと、正しく使えていることは別です。

88
00:06:53.364 --> 00:07:00.991
太字の見た目だけに頼らず、スマートフォンなど幅の狭い画面や、文字を拡大した状態でも読みやすいかを確認してください。

89
00:07:00.991 --> 00:07:07.279
対応状況が変わることもあるため、新しい案件では最新の情報もあわせて確認する習慣を持ちましょう。

90
00:07:07.279 --> 00:07:10.692
まとめとして、よくある間違いを三つ挙げます。

91
00:07:10.692 --> 00:07:16.432
一つ目は、目立たせたい気持ちから、あちこちをビーで太くしてしまうことです。

92
00:07:16.432 --> 00:07:20.000
全部が太字では、結局どこにも注意が向きません。

93
00:07:20.000 --> 00:07:24.654
二つ目は、重要な警告や注意事項にビーを使ってしまうことです。

94
00:07:24.654 --> 00:07:27.911
重要性を伝えたいならストロングが正解です。

95
00:07:27.911 --> 00:07:33.651
三つ目は、見出しを太くしたいからと見出し全体をビーで囲むような使い方です。

96
00:07:33.651 --> 00:07:38.926
見出しには、エイチワンからエイチシックスまでの見出し要素があります。

97
00:07:38.926 --> 00:07:43.114
ビータグは、重要性ではなく注意を向けるためのタグです。

98
00:07:43.114 --> 00:07:46.838
キーワードなど、見つけてほしい語句に絞って使う。

99
00:07:46.838 --> 00:07:49.475
これでビータグの解説を終わります。

100
00:07:49.475 --> 00:07:55.525
まずは記事の例で、キーワードを一つだけビーで囲むところから試してみてください。