【HTML】em要素の使い方【用語にアクセントを付けます】

Program

em要素を使えば、文の中にアクセントを付けることができます。

em要素の基本的な使い方

まずは、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
    <p>スカイツリーの高さは<em>634m</em>である。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、「スカイツリーの高さは634mである。」と書かれた文章があります。

そして、「634m」と書かれたフレーズは、em要素でマークアップされています。

このため、ブラウザでの表示結果の通り、「634m」は、斜め文字のように表示されています。

つまり、この「斜め文字」のように表示された状態が、「強勢(アクセント)が付与された状態」を示してます。

全角文字に「強勢(アクセント)」を付与することはできる?

次に、全角文字(日本語)について、em要素でマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
    <p>スカイツリーの高さは<em>634m</em>である。</p>   
    <p>スカイツリーの<em>高さ</em>は<em>634m</em>である。</p>
</body>
</html>

先ほどのプログラムに、もう一行、文章を追加しました。

追加した文章では、「高さ」と、全角文字として記載した「634m」について、em要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「高さ」及び「634m」の両方のフレーズ共に、「強勢(アクセント)」を付与することができないことが確認できます。

英語(英文)ではどうなる?

では、英語(英文)について、em要素でマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
    <p>スカイツリーの高さは<em>634m</em>である。</p>   
    <p>スカイツリーの<em>高さ</em>は<em>634m</em>である。</p>
    <p><em>The height</em> of the Sky Tree is <em>634 meters</em>.</p>
</body>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。

追加した英文では、「The height」と「634 meters」について、em要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「The height」と「634 meters」の両方のフレーズ共に、「強勢(アクセント)」を付与できました。

em要素は、半角文字にのみマークアップが可能なのか?

さらに、半角のカタカナについて、em要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
    <p>スカイツリーの高さは<em>634m</em>である。</p>   
    <p>スカイツリーの<em>高さ</em>は<em>634m</em>である。</p>
    <p><em>The height</em> of the Sky Tree is <em>634 meters</em>.</p>
    <p><em>スカイツリー</em>の高さは<em>634m</em>である。</p>
</body>
</html>

先ほどのプログラムに、半角カタカナのフレーズを含む日本語の文章を追加しました。

追加した英文では、「スカイツリー」と「634m」について、em要素でマークアップしてあります。

これについては、ブラウザでの表示結果の通り、「634m」については「強勢(アクセント)」を付与できましたが、半角カタカナの「スカイツリー」には、「強勢(アクセント)」を付与することができませんでした。

以上から、em要素は、「英文」及び「半角数字」に対してのみ、「強勢(アクセント)」を付与することが可能であることが、確認できました。

「強勢(アクセント)を付与する」の意味

そもそも『強勢(アクセント)を付与する』って、どういう意味?

2つの例文について、紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
    <p>Web学習は、<em>HTML</em>を学習することで、CSSも同時に学習できる。</p>   
    <p>Web学習は、HTMLを学習することで、<em>CSS</em>も同時に学習できる。</p>
</body>
</html>

上の文章では、HTMLに強勢が付与されています。

下の文章では、CSSに強勢が付与されています。

つまり、上の文章では「HTMLを学習することで」との内容に強い意味を持たせています。

下の文章では「CSSも同時に学習できる」との内容に強い意味を持たせています。

すなわち、em要素は、文の中においてアクセントを付ける位置を設定することで、文章の意味(伝える意味)を変えることができます。

各種ブラウザでの表示結果

【HTML】Google ChromeMicrosoft EdgeSafariFirefoxOpera
em要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、em要素の使い方について、ご参考になさってくださいね。

タイトルとURLをコピーしました