HTML

このページでできるようになること

• <em> が「何を伝える要素か（装飾ではなく強調）」を説明できる
• <strong> / <i> との違いを、用途で判断できる
• 入れ子にしたときに「強調の強さ」が変わる点を理解して、やりすぎを避けられる
• UI文言（注意・否定・条件）で、読み間違いを減らす強調ができる
• 試験対策：見た目（italic）と意味（emphasis）を混同する“ひっかけ”を回避できる

まずは直感：<em> って何？

ざっくり言うと <em> は「文章の読み方を変える強調」です。

• 意味を足す：強調して読むべき場所だと伝える（文章のニュアンスが変わる）
• 見た目は結果：斜体は多いが保証ではない（CSSで変わる）
• 重ねると強くなる：入れ子にすると強調が増す（多用は逆効果）

最小デモ：まず動かす

まずは「普通の文章」と「強調した文章」の違いを体感します。

<p>このボタンは <span class="demoEmMark">削除</span> ではありません。</p>
<p>このボタンは <em class="demoEmMark">削除</em> ではありません。</p>
<p>このボタンは <em>削除</em> ではありません（見た目は環境で変わります）。</p>

.demoEmMark {
	background: rgba(255, 230, 120, 0.6);
	padding: 0.05em 0.25em;
	border-radius: 0.25em;
}

正確な定義（仕様に沿った説明）

何のために存在するか

<em> は、文章の中で「ここは強調して読むべきだ」という強勢（stress emphasis）を示します。強調の位置によって、同じ文でも意図やニュアンスが変わり得ます。

どこで使うか（典型）

• 否定や対比：これは無料、あれは有料
• 条件や例外：今日だけ割引、会員のみ適用
• 誤解を避けたい語：削除ではない、停止だ

入れられる内容（ざっくり）

文章の流れの中で使う要素なので、主に「文章内に置ける要素」（テキスト、リンク、画像、<span> など）を含められます。段落や見出しのような大きいブロック要素は入れません。

<strong> / <i> との違い

見た目が似ていて混同しがちなので、目的で分けます。

<em>

文章の読み方を変える“強調”を示す（入れ子で強くなる）。

<strong>

重要性（important）を示す（警告、重大な注意、強い重要度）。

<i>

文脈上の“別の声”や“分類上の表記”を示す（語句、慣用句、学名、心の声など）として使うことがある。

入れ子（ネスト）の意味：強調が増える

<em> は入れ子にできます。入れ子は「強調をさらに強くする」扱いになるため、多用すると文章がうるさくなります。

<p>
    この操作は <em>元に<em>戻せません</em></em>。
</p>

• 入れ子は「強調の段階」を増やす意図があるときだけ
• 見た目を強くしたいだけなら CSS を使う（意味は増やさない）

よくある事故と回避策

症状：とにかく斜体にしたくて <em> を乱用した

原因候補：見た目目的。解決：<span> + CSS（例：font-style: italic）で装飾に分離する。

症状：注意文を全部 <em> にした

原因候補：「重要」と「強調」の混同。解決：危険/重要は <strong>、読み方を変える箇所だけ <em>。

症状：見た目が変わらず “効いてない” と思った

原因候補：CSSで既定スタイルが上書きされている。解決：Styles/Computedで font-style を確認し、必要ならクラスで見た目を補う（意味と装飾を分ける）。

アクセシビリティ（A11y）観点

• <em> は装飾ではなく意味なので、視覚以外の読み手にも意図が伝わりやすくなります。
• ただし、強調の連発は“全部大事”に見えて逆効果になり得ます（強調する語を最小化）。
• 見た目の強調（色だけ、太字だけ）に頼る場合は、文章としても意味が通るように書き分けると安全です。

試験で狙われやすいポイント（HTML5プロ認定：レベル1）

• 誤：<em> は斜体にするための要素 → 正：斜体は既定スタイルの一例で、要素の目的は強調。
• 誤：<em> と <strong> は同じ → 正：強調（読み方）と重要性（重要度）で意味が違う。
• 正：<em> は入れ子にでき、強調の度合いが増す。

まとめ：迷ったときの判断軸

• 読み方（ニュアンス）を変えたい → <em>
• 重要・警告として目立たせたい → <strong>
• 見た目だけ変えたい → <span> + CSS
• 入れ子は最小限（強調の段階が本当に必要なときだけ）