HTML
The <em> element in HTML is a semantic tag that indicates special contextual emphasis within a text, signaling to browsers and screen readers that this part should be read with particular importance.
em要素
em要素は、文章中の「強調すべき内容」を示すために使われる要素です。単純に文字を斜体にするだけでなく、「ここに特別な意味合いやニュアンスが込められている」ということを示すための「文書構造上の意味(セマンティクス)」を持っています。
em要素の主な役割
文意における強調(emphasis)を示す
実際のブラウザ上ではデフォルトのスタイルとしてイタリック(斜体)で表示されることが多いですが、あくまでも視覚的な効果というより、「文脈上の強調」であることが重要です。
テキストの強調度を段階的に表現可能
em要素は入れ子(ネスト)にすることができ、ネストの回数によって強調度合いをより高める使い方があります。ただし、現実的にはネストに対してのスタイリングが標準でそれほど明確に変化しないことが多いため、多用は控えられることが多いです。
スクリーンリーダーなどの支援技術で読み上げられる際に強調される
em要素を使っている部分は、支援技術によって「強調されている箇所」として扱われるケースがあります。たとえば、音声のトーンを変えて読み上げるなど、利用者に文脈的な強調を伝えられます。
em要素と似た要素との違い
strong要素との違い
strong要素は「強い重要性」を示したい場合に使われることが多く、視覚的には太字(ボールド)で表示されるのが一般的です。
一方で em要素は「声の抑揚的なニュアンス」を伝える強調のイメージが近く、文脈上、感情やニュアンスに重点を置いた箇所に適します。
例: セリフを表現する際、「そこに本当に 行きたくない」というように感情を表す場合など。
i要素との違い
i要素は「特別な用語」「ラテン語の種名」「テクニカルな用語のどこか一部をイタリックで示す」など、あくまでも「文章の中で慣習的にイタリック表現されるテキスト」を示す際に使われることが多く、強調の意味合いはもたないとされています。
em要素は「文章中の特定の部分に強調の意味」を付与するセマンティクスがあるため、単なるイタリック装飾とは異なります。
em要素を使うときの注意点
過度な入れ子は避ける
多層的に強調すべき文章構造は少ないため、入れ子を多用するのは可読性を損ねる可能性があります。本当に複数段階の強調が必要かどうか、文脈を再確認しましょう。
スタイルより文脈の意味を重視する
“文字を斜体にしたい”という目的だけで em要素を使うのは好ましくありません。視覚表現が目的の場合は CSSで font-style: italic; などを指定する方法を検討し、HTML要素にはあくまで「セマンティクス(文脈的意味)」を持たせるようにします。
strong要素との住み分け
強調したい内容が「重要度の高さを伝えるものか」「感情表現や抑揚を意図したものか」を考え、目的に応じて使い分けるのが望ましいです。
Sample
彼はWorld Championship で初めて 優勝を果たしました。
<p>
彼は<span lang="en">World Championship</span>で
<em>初めて</em>優勝を果たしました。
</p>
em {
text-decoration: dotted underline;
text-underline-offset: 4px;
}
この例では「初めて」の部分が強調されるべき内容とみなし、em要素を使っています。スクリーンリーダーでは適切に強調が伝えられるため、見た目だけでなく文脈的にも「重要な初の優勝である」ことを知らせる効果があります。
Sample 2
以下の例文では、同じ文章でも em要素を挿入する位置によって、読み手が感じ取るニュアンスが微妙に変化する様子を示しています。
パターン1
<p>私は<em>本当に</em>あなたを愛しています。</p>
強調点
「本当に」
ニュアンス
「心から真剣に」愛しているという気持ちを強く表現しており、誠実さや真剣さにフォーカスが当たります。
パターン2
<p>私は本当に<em>あなたを</em>愛しています。</p>
強調点
「あなたを」
ニュアンス
「あなた」という存在そのものに焦点が置かれており、「愛しているのは他の誰でもなく“あなただ”」という点を強調しています。
パターン3
<p>私は本当にあなたを<em>愛しています</em>。</p>
強調点
「愛しています」
ニュアンス
「愛する」という行為や気持ちそのものを強くアピールしており、「愛するという感情が非常に深い」という点に重きが置かれます。
解説
位置による強調の対象の違い
em要素をどこに置くかによって、文章全体が伝えようとするポイントが微妙に変わります。パターン1では「本当に」という副詞を強調して誠意を示し、パターン2では「あなた」という対象に強調が移り、パターン3では「愛しています」の行為が強調されます。
セマンティクスの重要性
em要素は単なる文字装飾ではなく、「文脈上の強調」を意味づけするための要素です。視覚的には斜体表示になりがちですが、本来は支援技術(スクリーンリーダーなど)に「ここを重要に読んでほしい」という情報を伝える役割を担っています。
使い分けのポイント
強調すべき要素が「言葉の定義」なのか、「対象」なのか、「感情」なのかを考えて最適な位置に em要素を使うと、読み手により正確なニュアンスを届けられます。文脈によっては strong要素を使った方が「重要度の高さ」を伝えやすい場合もあるため、目的に合わせて使い分けることが大切です。
このように、同じフレーズでもどこを強調するかによって意味合いや伝わり方が変わるため、em要素の使い所を吟味することで文章の意図をより正確に読み手に伝えることができます。
Home
HTML (HyperText Markup Language)
ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。
i 要素
イタリック表記が通例のテキスト。
p 要素
段落を表す。
span 要素
一般的なテキスト範囲。
strong 要素
強い重要性を伝えるテキストの範囲を表します。
CSS (Cascading Style Sheets)
ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。
font-style
フォントをイタリック体・斜体にする。
text-decoration
テキストの下線・上線・取消線・点滅を指定する。
text-underline-offset
テキストの下線を基準位置からどれだけ離すか(オフセット)を指定し、可読性やデザイン面での調整を柔軟に行えるようにするためのプロパティです。
JavaScript
ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。
PHP (Hypertext Preprocessor)
サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。