SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのbタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:55動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の百六本目は、ビータグです。
  4. 0:06ビーは、文章の中で読者の注意を向けたい文字を囲むための要素です。
  5. 0:11キーワードや製品名など、ここを見てほしいという部分に使います。
  6. 0:14ブラウザーでは通常、太字で表示されるため、見た目だけを見ると大切なことを強調しているように感じるかもしれません。
  7. 0:22しかし、ビータグ自体は重要性を示しません。
  8. 0:24ここが最大のポイントです。
  9. 0:26今回は、ビーの意味、ストロングやイーエムとの使い分け、基本の書き方とコード例、
  10. 0:30ブラウザー互換性、よくある間違いまで順番に確認します。
  11. 0:34なぜ、重要でないのに注意を向ける必要があるのでしょうか。
  12. 0:39長い文章を読むとき、人は最初から最後まで一文字ずつ読むとは限りません。
  13. 0:45まず全体を眺めて、大事な語句を拾いながら読むことが多いのです。
  14. 0:50そこで、用語のキーワードや製品名が太字になっていると、知りたい言葉を素早く見つけられます。
  15. 0:57記事でも、ビーはキーワードなど読者の注意を向けたい文字だと説明されています。
  16. 1:03たとえば学習記事で、今回学ぶ用語だけを太くしておけば、あとから見返したときにも探しやすくなります。
  17. 1:11重要かどうかの判断とは別に、探しやすさや読みやすさを助ける。
  18. 1:16それがビータグの役割です。
  19. 1:18基本の書き方を確認します。
  20. 1:20ビーは、開始タグと終了タグで対象の文字を囲んで使います。
  21. 1:24空要素ではないので、終了タグを書き忘れないようにしてください。
  22. 1:29置き場所は、段落の中など、文章の流れの中です。
  23. 1:33段落そのものを作る要素ではなく、文の一部分だけを目立たせるためのインライン要素だと考えてください。
  24. 1:41画面の例は、ピータグで作った一文の中の、ボックスモデルという言葉だけをビーで囲んだ形です。
  25. 1:48文全体ではなく、注意を向けたい語句だけを囲むのが基本です。
  26. 1:52囲む範囲が広すぎると、どこに注目すればよいのか分からなくなります。
  27. 1:58短く、的を絞って使うことを意識しましょう。
  28. 2:01記事の活用事例をもとに、コード例をもう少し詳しく見ます。
  29. 2:06一行目はピータグの文章で、ボックスモデルというキーワードだけをビーで囲んでいます。
  30. 2:12ブラウザーで表示すると、その語句だけが太字になり、文章を流し読みしても目に入りやすくなります。
  31. 2:20二行目も同じ考え方で、次に学ぶ用語を太字にしています。
  32. 2:24練習するときは、エイチティーエムエル入門で作ったファイルをコピーし、段落の中のキーワードを一つだけビーで囲ってみてください。
  33. 2:34保存して再読み込みし、太字になった部分と、ほかの文章との違いを確認します。
  34. 2:40開発者ツールで要素を確認し、意図した範囲だけが囲まれているかも見ておきましょう。
  35. 2:47最も大切な使い分けが、ストロングとの違いです。
  36. 2:51ストロングは、その内容が重要である、重大である、あるいは緊急であるという意味を持ちます。
  37. 2:58警告文や、絶対に見落としてほしくない注意事項にはストロングを使います。
  38. 3:04一方、ビーは重要性を意味しません。
  39. 3:07単に、読者の目を向けたいだけの語句に使います。
  40. 3:11記事でも、内容の重要性を示すならストロングを選ぶと説明されています。
  41. 3:16どちらも標準では太字で表示されるため、見た目はよく似ています。
  42. 3:22しかし、読み上げソフトや検索プログラムなど、機械が意味を読み取る場面では違いが出ます。
  43. 3:29太くしたいからビー、ではなく、この言葉は本当に重要かどうかを先に考えることが大切です。
  44. 3:36ビーと似た場面で候補になるタグは、ほかにもあります。
  45. 3:40イーエムは、文の中で強調して読む部分を示し、強調する場所によって意味が変わるような箇所に使います。
  46. 3:47アイは、専門用語や船の名前、考えている内容など、通常の本文とは性質が異なる文字を示すタグです。
  47. 3:54マークは、検索キーワードに一致した部分など、その文脈で関連性が高い部分を目立たせるために使います。
  48. 4:02どれも見た目が変わるタグですが、担っている意味はそれぞれ違います。
  49. 4:07迷ったときは、見た目ではなく、この文字はなぜ目立つのか、その理由を言葉にしてみてください。
  50. 4:14理由が単に注意を向けたいだけなら、ビーが候補になります。
  51. 4:18ビーが活躍する場面を整理します。
  52. 4:20一つ目は、説明文や学習記事の中のキーワードです。
  53. 4:24これから説明する用語を最初に太字で示しておくと、読者は話の中心を掴みやすくなります。
  54. 4:30二つ目は、レビューの文章の中の製品名やサービス名です。
  55. 4:34感想の中で対象の名前が目立つと、どの製品についての評価なのかが一目で分かります。
  56. 4:40三つ目は、記事の導入文です。
  57. 4:42あとで詳しく扱う語句を先に目立たせておくことで、読む前の心構えを作れます。
  58. 4:48いずれも共通するのは、その言葉自体が警告のように重要なのではなく、探しやすく、
  59. 4:52目に入りやすくしたいという目的です。
  60. 4:57その目的に合っているかを確かめてから使いましょう。
  61. 5:00属性を確認します。
  62. 5:02ビーには、この要素専用の属性はありません。
  63. 5:05記事でも、必須となる専用の属性はないとされています。
  64. 5:09必要に応じて使うのは、多くの要素で共通のグローバル属性です。
  65. 5:14アイディーは文書の中で一意の識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、
  66. 5:19ラングは内容の言語を示します。
  67. 5:25たとえばキーワードというクラスを付けておけば、シーエスエスで太字に加えて色も変える、
  68. 5:29といった調整ができます。
  69. 5:34ただし、クラスを付けたからといって要素の意味が変わるわけではありません。
  70. 5:39あくまで見た目や処理のための目印です。
  71. 5:42意味はタグで、見た目はシーエスエスで、という分担を忘れないでください。
  72. 5:48シーエスエスとの関係も押さえておきます。
  73. 5:51ビーが太字で表示されるのは、ブラウザーが標準で用意している表示です。
  74. 5:55そのため、シーエスエスでフォントウェイトや文字色を指定すれば、太さや色は変更できます。
  75. 6:01逆に考えると、ビーを使わなくても、スパンのような意味を持たない要素にフォントウェイトを指定すれば、
  76. 6:05文字を太くすることはできます。
  77. 6:09記事でも、太さだけを変えたい場合はスパンとフォントウェイトで表せると紹介されています。
  78. 6:15選び方の基準は、キーワードとして注意を向けたいという意味があるかどうかです。
  79. 6:19意味があるならビー、単なる装飾ならスパンとシーエスエス。
  80. 6:23こう分けて考えると、マークアップが整理されます。
  81. 6:26ブラウザー互換性を確認します。
  82. 6:28記事が紹介するエムディーエヌのデータでは、ビー要素本体は、クロームが一以降、
  83. 6:34エッジが十二以降、ファイアフォックスが一以降、サファリが一以降から対応しています。
  84. 6:39いずれも非常に古いバージョンから対応しており、現在の主要ブラウザーでビーが表示できない場面は、
  85. 6:43まず考えなくてよいでしょう。
  86. 6:47安心して使える要素です。
  87. 6:49ただし、互換性に問題がないことと、正しく使えていることは別です。
  88. 6:53太字の見た目だけに頼らず、スマートフォンなど幅の狭い画面や、文字を拡大した状態でも読みやすいかを確認してください。
  89. 7:00対応状況が変わることもあるため、新しい案件では最新の情報もあわせて確認する習慣を持ちましょう。
  90. 7:07まとめとして、よくある間違いを三つ挙げます。
  91. 7:10一つ目は、目立たせたい気持ちから、あちこちをビーで太くしてしまうことです。
  92. 7:16全部が太字では、結局どこにも注意が向きません。
  93. 7:20二つ目は、重要な警告や注意事項にビーを使ってしまうことです。
  94. 7:24重要性を伝えたいならストロングが正解です。
  95. 7:27三つ目は、見出しを太くしたいからと見出し全体をビーで囲むような使い方です。
  96. 7:33見出しには、エイチワンからエイチシックスまでの見出し要素があります。
  97. 7:38ビータグは、重要性ではなく注意を向けるためのタグです。
  98. 7:43キーワードなど、見つけてほしい語句に絞って使う。
  99. 7:46これでビータグの解説を終わります。
  100. 7:49まずは記事の例で、キーワードを一つだけビーで囲むところから試してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

bタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。重要性の強調ではなく、キーワードなど読者の注意を向けたい文字です。

解説記事・サンプルコードを読む：HTMLのbタグとは？属性・使い方・ブラウザー互換性と活用例 →