この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:guest
更新日時:2026-06-11 07:29:05

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

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

em 要素とは

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

基本的な使い方

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

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

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

表示と読み上げ

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

em と strong の違い

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

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

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

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

em と i の違い

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

要素意味使い分け
強調・アクセント音読時に声を強めたい
別の文体（外国語・思考・専門用語）音読のトーンは変わらないが、テキスト的に区別したい
作品名の引用『1984』『Hamlet』など作品名
視覚的に目立たせるが特別意味なしキーワードを太字にしたいが 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 の意味的強調とは異なります。