◀ 8.

HTML em 要素の正しい使い方（口調強調・スクリーンリーダー・strong との違い）

▶
この記事の要点
  • <em> は口調的な強調を表すセマンティック要素
  • デフォルトでイタリック表示。CSS で見た目変更可
  • strong は重要性、em は口調・トーンの強調。意味が違う
  • スクリーンリーダーは em 部分を音声強調して読み上げる
  • 装飾目的のイタリックは <i> または CSS font-style を使う

em 要素とは

<em>（emphasis）は HTML のセマンティックな強調要素です。「文の中でアクセント・口調を強める部分」を表現するためにあります。デフォルトのスタイルはイタリック（斜体）ですが、意味は「斜体にする」ではなく「強調する」です。

基本的な使い方

<p>このボタンは<em>絶対に</em>押さないでください。</p>

<p>「これは<em>あなたの</em>責任ですよ」と彼は言った。</p>

<!-- ネストして強調を強める -->
<p>これは<em>非常に<em>とても</em></em>重要です。</p>

表示と読み上げ

環境挙動
視覚ブラウザデフォルトでイタリック表示
スクリーンリーダー声のトーンを変える / 音声強調する
検索エンジン文中で意味のあるアクセントとして解釈
音声合成ピッチや速度を変える実装あり

em と strong の違い

HTML5 では <em> と <strong> は意味が異なると定義されています。

要素意味例
<em>口調・アクセントの強調「絶対に」「あなたの」など、声を強める箇所
<strong>重要性 / 緊急性「警告」「重要」「危険」など内容の重さ
 
<!-- em: 文中のニュアンス -->
<p>これは<em>あなたが</em>選んだ道です。</p>

<!-- strong: 重要な情報 -->
<p><strong>警告:</strong> この操作は元に戻せません。</p>

<!-- 両方使う場合 -->
<p><strong>重要</strong>: ファイルは<em>必ず</em>バックアップしてください。</p>

em と i の違い

<i> は HTML5 で意味が見直され、「声色やニュアンスではなく、別の流儀の語」を表すようになりました。具体的には外国語・専門用語・船名・思考表現などです。

要素意味使い分け
<em>強調・アクセント音読時に声を強めたい
<i>別の文体（外国語・思考・専門用語）音読のトーンは変わらないが、テキスト的に区別したい
<cite>作品名の引用『1984』『Hamlet』など作品名
<b>視覚的に目立たせるが特別意味なしキーワードを太字にしたいが strong ほどではない
 
<!-- em: 強調 -->
<p>これは<em>本当に</em>重要です。</p>

<!-- i: 外国語 -->
<p>彼はそれを<i lang="fr">déjà vu</i>と呼んだ。</p>

<!-- i: 思考 -->
<p>「<i>これは罠かもしれない</i>」と彼は思った。</p>

<!-- cite: 作品名 -->
<p>『<cite>HTML5 仕様書</cite>』を参照してください。</p>

CSS で見た目を変える

em のデフォルトはイタリックですが、CSS で任意の見た目に変えられます（意味は保たれます）。

/* イタリックをやめて色変更 + 太字に */
em {
  font-style: normal;
  font-weight: bold;
  color: #c2410c;
}

/* アンダーラインを引く */
em {
  font-style: normal;
  text-decoration: underline wavy #f59e0b;
}

/* 強調表現のクラスを別途用意 */
.kicker {
  display: inline-block;
  font-weight: 700;
  background: #fef3c7;
  padding: 0 0.3em;
}

日本語での使いどころ

日本語は欧文と違って斜体の文化が薄く、視覚的な強調には太字や囲み文字を使うのが一般的です。とはいえ em の意味的役割は日本語でも活きるので、強調したい単語に積極的に使い、CSS で見た目を整えるのが現代的です。

<style>
  em {
    font-style: normal;
    background: linear-gradient(transparent 60%, #fde68a 60%);
  }
</style>

<p>このボタンは<em>絶対に</em>押さないでください。</p>

ネストした em の意味

em をネストすると強調レベルが上がるという解釈になります。

<p>これは<em>大事</em>です。</p>
<p>これは<em><em>とても</em></em>大事です。</p>
<p>これは<em><em><em>非常に</em></em></em>大事です。</p>

アンチパターン

  • 単に斜体にしたいから em を使う → 見た目目的なら CSS font-style: italic
  • 太字にしたいから strong を使う → 重要性がないなら <b> または CSS
  • ページ全体を em で囲む → 強調が無効化される（全部強調 = 強調なし）
  • em の中に大きなブロック（p, div）を入れる → em はインライン要素

SEO / アクセシビリティ

  • クローラーは em / strong の位置を意味のシグナルとして参考にする可能性
  • スクリーンリーダー（NVDA / VoiceOver / JAWS）は em / strong を音声で区別して読む実装あり
  • アクセシブルな文章には em / strong の使い分けが効く

FAQ

Q: 古い HTML4 では em は単なる斜体だった？
A: いえ、HTML4 でも em は「強調」、strong は「より強い強調」という意味でした。HTML5 で strong の定義が「重要性」に変わりました。

Q: Markdown の *text* は em？ strong？
A: 多くの方言で *text* または _text_ が em、**text** または __text__ が strong になります。

Q: em と mark の違いは？
A: mark は「マーカーで線を引いたような、文脈上注目してほしい部分」を表します。検索ヒット箇所のハイライトなどに使い、em の意味的強調とは異なります。

Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 07:29:05 guest 237

人気ページ

最近更新/作成されたページ