SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の二十二本目は、ストロングタグです。
  4. 0:08ストロングは、文章の中で、重要、重大、緊急であることを示すタグです。
  5. 0:14ブラウザーではふつう太字で表示されるので、太くするためのタグに見えますが、
  6. 0:18本当の役割は違います。
  7. 0:21ここが大事だ、という意味を、読み手にも、検索エンジンや読み上げソフトにも正しく伝えることが目的です。
  8. 0:30今回は、使う場面、基本の書き方、記事のコード例、ビーやイーエムとの違いまで、
  9. 0:34初心者向けに順番に解説します。
  10. 0:38太字の使い分けで迷わなくなる、実践的な内容です。
  11. 0:42身近な注意書きを思い浮かべながら聞くと、使いどころがイメージしやすくなります。
  12. 0:48まず、どんな場面で使うかを整理しましょう。
  13. 0:52ストロングが向いているのは、読み飛ばすと困る情報です。
  14. 0:56たとえば、注意事項の中で特に守ってほしい条件、手順の中で順番を間違えると失敗する部分、
  15. 1:01締め切りが迫っているお知らせなどです。
  16. 1:06逆に、文章のあちこちをストロングで囲むと、かえって何が大切か分からなくなります。
  17. 1:13記事も、強調を増やし過ぎると重要度が伝わらなくなると注意しています。
  18. 1:18本当に重要な一か所、二か所に絞って使うことが、読み手への親切になります。
  19. 1:24色だけに頼らず、言葉自体でも大切さが伝わるように書きましょう。
  20. 1:29自分が読み手だったら、どこを最初に目で追うかを考えると、置く場所が見えてきます。
  21. 1:36基本の書き方です。
  22. 1:37ストロングは開始タグと終了タグを明示し、その間に大切な言葉を入れます。
  23. 1:43段落や見出し、リストといった文章の中で、部分的に使うのが基本です。
  24. 1:49コード例では、提出期限の日時だけを囲んだ例と、注意という言葉を囲んだ例を示しています。
  25. 1:56文章全体を囲むのではなく、大切なまとまりだけを囲むのがコツです。
  26. 2:01段落全体が重要な場合は、まず見出しや文章の構成で伝える方法も考えましょう。
  27. 2:07保存後に再読み込みして、意図した部分だけが太字になっているか確認してください。
  28. 2:14タグの前後の文章も含めて読むと、強調の範囲が適切かどうかが分かりやすくなります。
  29. 2:21記事の活用事例を見てみましょう。
  30. 2:23例は、保存してから、ブラウザーを再読み込みしてください、という一文です。
  31. 2:28ここでストロングが囲んでいるのは、保存してから、という部分です。
  32. 2:33なぜここが重要かというと、保存する前に再読み込みすると、せっかく書いた内容が消えてしまうからです。
  33. 2:40つまり、順番そのものが守るべき条件になっています。
  34. 2:43このように、失敗を防ぐための条件や、手順の要になる言葉に使うと、ストロングの意味がはっきりします。
  35. 2:50練習用ファイルに写して、開発者ツールのエレメンツで構造を確認してみましょう。
  36. 2:56この例は短いですが、条件を最初に示す書き方は、説明文全般に応用できる形です。
  37. 3:01少し進んだ使い方として、入れ子を紹介します。
  38. 3:05ストロングの中に、さらにストロングを入れると、その内側の言葉は、周りよりもさらに重要である、
  39. 3:10という意味になります。
  40. 3:15コード例では、警告全体をストロングで囲み、その中でも、元に戻せません、という最も重大な部分をもう一度囲んでいます。
  41. 3:24削除や送信など、取り返しのつかない操作の注意書きで使える考え方です。
  42. 3:30ただし、これは本当に段階を付けたいときだけの方法です。
  43. 3:35普段から多用すると段階の意味が薄れるので、ここぞという場面に温存しておきましょう。
  44. 3:42入れ子の考え方は、仕様で認められた相対的な重要度の表し方として知られています。
  45. 3:48ストロングの属性を整理します。
  46. 3:51この要素には、必須となる専用の属性はありません。
  47. 3:56必要に応じて、アイディー、クラス、ラング、データ属性といった、どの要素にも使える共通属性を利用します。
  48. 4:05たとえばコード例のように、クラスを付ければ、シーエスエスで色を足したり、
  49. 4:10ジャバスクリプトから参照したりできます。
  50. 4:16ただし、クラスで見た目を変えても、要素の意味そのものは変わりません。
  51. 4:22大切なのは属性の数ではなく、囲んだ言葉が本当に重要かどうかです。
  52. 4:28まずは属性なしで正しく使うことに慣れましょう。
  53. 4:32データ属性は、画面に見せる情報ではなく、プログラム側で使う値のためにあります。
  54. 4:40間違えやすい、ビーとイーエムとの違いを押さえましょう。
  55. 4:44ストロングは重要さを示します。
  56. 4:46イーエムは、抑揚によって文の意味が変わる部分を強調します。
  57. 4:51たとえば、それはあなたの本です、と、あなたを強調すると、持ち主が誰かという意味が際立ちます。
  58. 4:58ビーは、製品名やキーワードなど、特別な重要さはないけれど、実用上太字にしたい部分に使います。
  59. 5:05見た目が似ていても、意味はまったく別です。
  60. 5:09迷ったら、その言葉が重要か、抑揚か、単なる目立たせか、と自問してからタグを選んでください。
  61. 5:16この三つの区別ができると、コードを読む側にも意図が正確に伝わるようになります。
  62. 5:22大切な区別をもう一つ。
  63. 5:24ただ太字にしたいだけなら、ストロングではなくシーエスエスを使います。
  64. 5:28記事の一文にも、太字にするだけならシーエスエスを使います、と明記されています。
  65. 5:34ストロングが太字に見えるのは、ブラウザーが初期状態で太字にしているからにすぎません。
  66. 5:40見た目だけが目的なら、スパンなどにクラスを付け、フォントウェイトで太くする方が、
  67. 5:44意味と見た目を分けて管理できます。
  68. 5:48逆に、本当に重要な言葉なら、色や太さに頼る前に、まずストロングで意味を示すことが先です。
  69. 5:55この順番を守りましょう。
  70. 5:56意味と見た目を分ける考え方は、ほかの多くのタグにも共通する大切な原則です。
  71. 6:02注意点と、よくある間違いを確認します。
  72. 6:05一つ目は使いすぎです。
  73. 6:07長い文章全体をストロングで囲むと、強調の意味がなくなり、読み上げでも伝わりません。
  74. 6:14二つ目は、見出し代わりに使う間違いです。
  75. 6:17大きく太くしたいからといって見出しの代わりにせず、見出しにはエイチタグを使いましょう。
  76. 6:24三つ目は、色だけに頼ることです。
  77. 6:27赤字にしただけで重要さを伝えた気にならず、言葉の内容自体に、期限や条件といった必要な情報を含めてください。
  78. 6:36また、三百二十ピクセル程度の狭い画面でも、文章が欠けずに読めるか確認する習慣も大切です。
  79. 6:44公開前に一度、強調した部分だけを拾い読みして、過不足がないか見直しましょう。
  80. 6:50ブラウザー互換性を確認します。
  81. 6:52記事が参照するエムディーエヌの記録では、ストロング本体は、クロームが一以降、
  82. 6:59エッジが十二以降、ファイアフォックスが一以降で、補足条件付きで対応し、サファリは四以前から対応しています。
  83. 7:05数字がとても小さいことから分かる通り、昔からある基本の要素なので、現在の環境では安心して使えます。
  84. 7:12ただし、これは要素本体の対応開始の記録であり、細かな表示までを保証するものではありません。
  85. 7:18大切なページでは、スマートフォンなど利用対象の実機でも、一度表示を確認しておきましょう。
  86. 7:24対応が古くから安定している要素ほど、学習の初期に覚えておくと長く役立ちます。
  87. 7:30最後に練習とまとめです。
  88. 7:31ストロングは、重要、重大、緊急であることを示すタグでした。
  89. 7:35大切なポイントは三つです。
  90. 7:37一つ目は、本当に大切な部分だけに絞って使うこと。
  91. 7:41二つ目は、ビーやイーエムとは意味が違うので、目的で選び分けること。
  92. 7:45三つ目は、太字にしたいだけならシーエスエスを使うことです。
  93. 7:49練習として、操作手順の注意書きを一つ書き、失敗すると困る条件だけをストロングで囲んで、
  94. 7:54ブラウザーで表示を確認してみてください。
  95. 7:58お疲れさまでした。
  96. 8:00次回は、文章の一部に意味なく範囲を指定する、スパンタグを学びましょう。
  97. 8:05今日の内容を、自分の練習ページの注意書きで早速試してみることが一番の復習です。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

strongタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。重要、重大、緊急であることを示します。太字にするだけならCSSを使います。

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