em要素
Webページでは、単語や段落全体を強調したい時があります。
本ページでは、em要素について説明します。
em要素とは
em要素は、強調する内容を示す時に使います。ブラウザ上では、イタリック体(斜体)で表示されます。
emの定義は、以下のとおりです。
コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、認知可能コンテンツ |
---|---|
可能な親要素 | フレージングコンテンツを包含できる要素 |
可能なコンテンツ | フレージングコンテンツ |
タグの省略 | 不可 |
DOMインターフェース | HTMLElement |
なお、日本語のフォントではイタリック体を持たないもの(メイリオなど)も多く、その場合はイタリック体で表示されません。
利用例
以下は、emを使ったHTMLの例です。
【emの利用例】
<p>I like <em>cats</em>.</p>
これは、他の人が犬が好きですと言った後に、猫(cats)を強調する時に使うような例です。
他の人が猫が嫌いと言った後、否定するのであれば「like(好き)」をemで囲むのが適切になります。
上記により、以下のように表示されます。
cats部分だけイタリック体で表示されています。
属性
グローバル属性が使えます。
i、strong、mark要素との違い
i、strong、mark要素の概略は、以下のとおりです。
- i
- i要素も斜体で表示されますが強調的な意味を持たず、単に見た目上で前後の単語と区別する時に使います。例えば、専門用語や外国語の単語などで使われます。
- strong
- strong要素は、重要性、深刻性、緊急性などがある内容で使います。例えば、見出しの一部や注意書きなどです。
- mark
- mark要素は、関連性のある単語などを示します。例えば、検索結果の表示で検索した単語に使います。
em要素は、強調的な意味を持たせる時に使います。例えば、段落の一部に使って強調したり、要点を示すために段落全体に使って強調したりします。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | IE | Ed | Fx | Ch | Sa | Op |
---|---|---|---|---|---|---|
em | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
項目 | Sa | An | Op | Ch | Fx | Sm |
---|---|---|---|---|---|---|
em | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- 〇
- サポート
- △
- 制限あり
- ×
- 未サポート
- ?
- 不明
- IE
- Internet Explorer
- Ed
- Edge
- Fx
- Firefox
- Ch
- Chrome
- Sa
- Safari
- Op
- Opera
- An
- Android Browser
- Sm
- Samsung Internet
※スマートフォンのFirefoxとChromeは、Android版です。
「HTML要素(タグ)一覧」に戻る