SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の八十二本目は、エムタグです。
  4. 0:08エムは、文章の中で、声に力を入れて読んでほしい部分を示す要素です。
  5. 0:12たとえば、今日ではなく明日に来てください、と伝えたいとき、明日に強勢を置くことで、
  6. 0:17聞き手への伝わり方が大きく変わります。
  7. 0:21ブラウザーでは一般に斜体で表示されますが、目的は見た目ではありません。
  8. 0:26今回は、意味の違いを生む強勢の考え方から、書き方、よく似たタグとの使い分けまで、
  9. 0:30順番に確認していきましょう。
  10. 0:34漢字で書けば、強勢、つまり力を込めて読む、という意味です。
  11. 0:38短いタグですが、文章の伝わり方を左右する大切な役割を持っています。
  12. 0:43基本の書き方を確認します。
  13. 0:44エムは、開始タグと終了タグの両方を書いて、その間に本文を入れる要素です。
  14. 0:49段落を表すピータグのような文章の流れの中に置く、インラインの要素として使います。
  15. 0:55画面の例では、今という一語だけを囲んでいます。
  16. 0:58このように、囲む範囲は本当に力を入れたい部分だけに絞るのがコツです。
  17. 1:03段落全体を囲んでしまうと、どこが大切なのかがかえって伝わらなくなります。
  18. 1:07まずは短い範囲から使う感覚を身に付けてください。
  19. 1:11終了タグを書き忘れると、意図しない範囲まで強調が続いてしまうことがあります。
  20. 1:16タグは必ずペアで閉じることを、書くたびに確認してください。
  21. 1:20エムがほかの装飾と大きく違う点は、置く位置によって文の意味そのものが変わることです。
  22. 1:27私が明日行きます、という文で考えてみましょう。
  23. 1:31私を強調すれば、行くのはほかの人ではなく私だ、という意味になります。
  24. 1:37明日を強調すれば、日程がポイントになります。
  25. 1:41行くことを強調すれば、行くのか行かないのかが焦点になります。
  26. 1:46同じ文章でも、強勢の位置で聞き手が受け取る答えが変わるのです。
  27. 1:51書いたあとに声に出して読み、力を入れたい場所と一致しているか確かめる習慣が役立ちます。
  28. 1:59たとえば面接や発表の原稿でも、この位置を意識するだけで、同じ文章がぐっと伝わりやすくなります。
  29. 2:07それが、エムが持つ力です。
  30. 2:09記事の活用事例を読み解きます。
  31. 2:12例は、この操作は今実行してください、という一文で、今だけをエムで囲んでいます。
  32. 2:18これにより、操作そのものではなく、タイミングが大切だというメッセージになります。
  33. 2:24後でではなく、今すぐやってほしい、という強勢です。
  34. 2:28試すときは、練習用ファイルのボディにこの例を写し、保存して再読み込みし、
  35. 2:33今の部分が斜体で表示されるかを確認してください。
  36. 2:38開発者ツールで構造を見て、意図した範囲だけが囲まれているかも合わせてチェックしましょう。
  37. 2:45確認の際は、表示だけでなく、エムの開始位置と終了位置が、今の一語だけを囲んでいるか、
  38. 2:49ソースでも見直してみてください。
  39. 2:54よく混同されるストロングとの違いを整理します。
  40. 2:58ストロングは、内容そのものが重要である、重大である、緊急であることを示します。
  41. 3:06警告文のように、読み飛ばしてほしくない情報に使うタグです。
  42. 3:11一方、エムは重要性ではなく、文を読むときの強勢です。
  43. 3:16どこに力を入れて読むと意味が正しく伝わるか、という観点で選びます。
  44. 3:22たとえば、警告の見出しはストロング、その中で慎重にという読み方を伝えたい部分はエム、
  45. 3:29というように、役割の違いで分けると判断しやすくなります。
  46. 3:35迷ったときは、その部分が緊急で重要なのか、それとも読み方の焦点なのか、と自問すると、
  47. 3:41どちらを選ぶべきかはっきりします。
  48. 3:46ア イタグとビータグとの違いも押さえましょう。
  49. 3:50アイは、専門用語や外来語、登場人物の思考など、通常の本文とは性質が異なる語句を示します。
  50. 3:57強勢ではありません。
  51. 3:59ビーは、製品名やキーワードのように、重要性を主張せずに読者の注意を引きたい文字に使います。
  52. 4:06見た目はいずれも似て見えることがありますが、意味はまったく別です。
  53. 4:12エムは、声の強勢で文の意味が変わる場所にだけ使う。
  54. 4:16この基準を覚えておくと、三つのタグを迷わず選べるようになります。
  55. 4:21なお、三つとも初期表示が似ているのは偶然に近く、仕様が意図する意味とは関係がありません。
  56. 4:28見た目ではなく意味で選ぶことが原則です。
  57. 4:31エムには、入れ子によって強調の段階が変わるという、少し珍しい性質があります。
  58. 4:38エムの中にさらにエムを書くと、外側よりも内側の方が、より強い強勢として扱われます。
  59. 4:45読み上げ支援技術でも、段階に応じて読み方が変わる場合があります。
  60. 4:50ただし、これは強い表現が必要な場面のための仕組みです。
  61. 4:54何重にも重ねたり、ページのあちこちで使ったりすると、かえってどれも目立たなくなります。
  62. 5:02本当に段階を付けたい一箇所にだけ使う、節度のある使い方が大切です。
  63. 5:07画面の例は説明のためのものです。
  64. 5:10実際の文章では、本当に段階差が必要な場面は多くありません。
  65. 5:14使うかどうかは慎重に判断しましょう。
  66. 5:17属性を確認します。
  67. 5:19エムには、この記事で必須となる専用の属性はありません。
  68. 5:24必要に応じて、アイディー、クラス、ラングといった共通属性を使います。
  69. 5:30アイディーは文書内で一意な識別子、クラスはシーエスエスやスクリプトでまとめて選ぶための名前、
  70. 5:35ラングは内容の言語を示します。
  71. 5:41データ属性で独自の値を保持することもできますが、秘密情報を置く場所ではありません。
  72. 5:48また、クラスで見た目を変えても、エムが持つ強勢という意味自体は変わらない点も覚えておきましょう。
  73. 5:57共通属性は、あくまで補助です。
  74. 6:00まずは強勢が必要な場所かどうかを決め、属性は必要になったときにだけ、控えめに加えるのがおすすめです。
  75. 6:09見た目とシーエスエスの関係を確認します。
  76. 6:11エムは多くのブラウザーで斜体で表示されるのが標準ですが、これはあくまで初期の表示です。
  77. 6:18シーエスエスで太字にしたり、色を付けたり、斜体を解除したりすることもできます。
  78. 6:23逆に大切なのは、ただ文字を斜体にしたいだけの理由でエムを使わないことです。
  79. 6:28装飾が目的であれば、意味を持たない要素にシーエスエスを当てるべきです。
  80. 6:33意味はエイチティーエムエルで、見た目はシーエスエスで、という役割分担を守りましょう。
  81. 6:39表示を太字へ変えた場合でも、読み上げでの扱いはエムのままです。
  82. 6:44見た目の変更が、意味を変えるわけではない点に注意してください。
  83. 6:48ブラウザー互換性を確認します。
  84. 6:50記事が参照するエムディーエヌのデータでは、エム要素は、クロームが一以降、
  85. 6:57エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、主要ブラウザーで非常に古くから対応しています。
  86. 7:05新しい機能ではないため、対応を心配する必要はほぼありません。
  87. 7:09ただし、読み上げで強勢がどう表現されるかは、支援技術や設定によって異なります。
  88. 7:15見た目だけでなく、音声で聞いたときにも伝わる文章になっているかを意識すると、
  89. 7:19より親切なページになります。
  90. 7:23新しいブラウザーでも古いブラウザーでも、基本の表示に差はほとんどありません。
  91. 7:29学習の初期に覚えて、安心して使える要素の一つです。
  92. 7:33最後に、よくある間違いとまとめです。
  93. 7:35一つ目は、斜体にしたいだけの理由でエムを使うことです。
  94. 7:39装飾はシーエスエスの仕事です。
  95. 7:42二つ目は、文章全体を囲んでしまうことです。
  96. 7:45すべてを強調すると、結局どこも強調されません。
  97. 7:48三つ目は、重要な警告にエムだけを使うことです。
  98. 7:52重要性や緊急性はストロングの役割です。
  99. 7:54エムは、強調する位置で文の意味が変わる場所に、短く絞って使うタグです。
  100. 8:00この一文を判断基準にして、ぜひ手元の練習ページで強勢の位置を動かす実験をしてみてください。
  101. 8:06声に出して読み、力を入れたい場所とエムの位置が合っているか。
  102. 8:11これを公開前の最後の確認に加えておくと、伝わる文章に仕上がります。
  103. 8:16お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

emタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。文の意味に関わる強勢。強調する位置で意味が変わる箇所に使います。

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