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

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

1 em要素の基本的な使い方
2 全角文字に「強勢（アクセント）」を付与することはできる？
3 英語（英文）ではどうなる？
4 em要素は、半角文字にのみマークアップが可能なのか？
5 「強勢（アクセント）を付与する」の意味
6 各種ブラウザでの表示結果

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>６３４ｍ</em>である。</p>
</body>
</html>

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

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

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

英語（英文）ではどうなる？

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em要素</title>
</head>
<body>
    <p>スカイツリーの高さは<em>634m</em>である。</p>   
    <p>スカイツリーの<em>高さ</em>は<em>６３４ｍ</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>６３４ｍ</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要素は、「英文」及び「半角数字」に対してのみ、「強勢（アクセント）」を付与することが可能であることが、確認できました。

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

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

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

<!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>