em 要素は「言い方・ニュアンスを強めるためのタグ」
<em> は
「ここ、ちょっと“気持ち強め”で読んでほしい」
という“ニュアンスの強調”を表すタグです。
ブラウザのデフォルト表示だと斜体になりますが、
目的は「斜体にすること」ではなく
「その言葉の“言い方”を強めること」 です。
文章を声に出して読むとき、
少しだけトーンを上げたり、ゆっくり言ったりする——
その「強調したいところ」をマークするのが <em> です。
em の基本的な使い方とイメージ
「本当に」「特に」「どうしても」みたいなところを包む
<p>
<em>本当に</em> ありがとうございます。
</p>
この文で強めたいのは「本当に」の部分ですよね。
「ありがとう」そのものよりも、
「本当に」のニュアンスを強くしたい。
だから <em> でそこだけを包みます。
もう一つ。
<p>
今日は <em>絶対に</em> 遅刻できません。
</p>
ここでも、
「絶対に」の部分に感情が乗っています。
em は「文の中の、感情やニュアンスが乗る部分」を強めるタグ
とイメージすると分かりやすいです。
strong との違いをしっかり押さえる
em は「言い方の強調」、strong は「情報の重要度」
よくセットで語られるのが <strong> との違いです。
<em>
emphasis（エンファシス）＝語調・ニュアンスの強調
「ここ、ちょっと気持ち強めで読んでほしい」
<strong>
重要度の強調
「この情報そのものが重要です」
例で比べてみます。
<p>
<em>本当に</em> すみませんでした。
</p>
これは「謝罪の気持ち」を強めています。
<p>
<strong>明日はシステムメンテナンスのため終日ご利用いただけません。</strong>
</p>
これは「お知らせの内容自体」が重要です。
もう少し混ぜた例：
<p>
<strong>明日は</strong> <em>本当に</em> 大事なプレゼンの日です。
</p>
「明日は」が情報として重要（strong）
「本当に」が気持ちとして強調（em）
という役割分担になっています。
em を使うと文章が“しゃべっている感じ”になる
声に出して読んだときのリズムを意識する
em をどこに付けるかは、
「声に出して読んだとき、どこを強めたいか？」
で決めるとしっくりきます。
例：
<p>
それは <em>ちょっと</em> 違うと思います。
</p>
「ちょっと」のところで、
少しトーンが変わりますよね。
<p>
これは <em>あくまで一例です</em>。
</p>
「絶対じゃないよ、例だよ」というニュアンスを
em でマークしています。
こういう「ニュアンスの補足」「トーンの変化」を
HTML 上で表現するのが <em> です。
em と CSS：見た目は変えてもいいし、変えなくてもいい
デフォルトは斜体。でもそれに縛られなくていい
多くのブラウザでは、<em> は斜体で表示されます。
<p>
<em>本当に</em> ありがとうございます。
</p>
ただ、「斜体が好きじゃない」「日本語だと読みにくい」
という場合もあります。
そんなときは、CSS で見た目を変えてしまって構いません。
em {
font-style: normal;
font-weight: bold;
color: #d32f2f;
}
これで、
「斜体ではなく、太字＋色」でニュアンスを出すこともできます。
大事なのは、
em を“意味としてのマーク”として使い、
見た目は CSS で自由に決める
という考え方です。
em と JavaScript：意味のある“フック”として扱う
強調部分だけスタイルや動きを変える
HTML：
<p>
現在の状態：<em id="statusText">待機中</em>
</p>
JavaScript：
const statusText = document.querySelector("#statusText");
function setStatus(text, isWarning) {
statusText.textContent = text;
if (isWarning) {
statusText.classList.add("is-warning");
} else {
statusText.classList.remove("is-warning");
}
}
setStatus("エラーが発生しました", true);
CSS：
em.is-warning {
color: #d32f2f;
font-weight: bold;
}
ここでは、
「状態の文字列にニュアンスを乗せたい」という意味で <em> を使い、
さらに状況に応じてクラスで見た目を変えています。
<em> を使うことで、
「ここは文の中でも“ニュアンスが乗る部分”だ」という情報が
HTML レベルで残るので、
JS や CSS からも意味のある対象として扱いやすくなります。
初心者として「em タグ」で絶対に掴んでほしいこと
<em> は、
「文章の中で、言い方・ニュアンスを強めたい部分」をマークするタグ です。
情報としての重要度を上げるのは <strong>
言い方・感情・ニュアンスを強めるのが <em>
声に出して読んだとき、
「ここ、ちょっと強めに言いたいな」と思う場所にだけ付ける。
見た目は斜体に限らず、CSS で自由に変えていい。
大事なのは「ここにニュアンスがあります」という“意味のマーク”として使うこと。
あなたが <em> を書くときに、
「この言葉、ただの情報じゃなくて“気持ち”が乗ってるよね？」
と自分に問いかけられるようになったら、
もう em を“斜体タグ”ではなく、
“文章に声と温度を与えるタグ”として扱えている状態です。