【HTML】i要素の使い方【慣用句、技術用語、感情などを他のテキストと区別します】

i要素を使えば、慣用句、技術用語、感情などを表すことができます。

1 i要素の基本的な使い方
2 英語（英文）ではどうなる？
3 i要素は、数字に対してマークアップが可能なのか？
4 i要素は、カタカナに対してもマークアップできる？
5 各種ブラウザでの表示結果

i要素の基本的な使い方

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i要素</title>
</head>
<body>
    <p>彼女は普段からおしゃべりで、本当に<i>口が軽い</i>。</p>
</body>
</html>

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

p要素の中には、「彼女は普段からおしゃべりで、本当に口が軽い。」と書かれた文章があります。

そして、慣用句である「口が軽い」というフレーズは、i要素でマークアップされています。

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

つまり、この「斜め文字」のように表示された状態が、「慣用句等のフレーズである」ことを示してます。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i要素</title>
</head>
<body>
    <p>彼女は普段からおしゃべりで、本当に<i>口が軽い</i>。</p>
    <p>She is usually chatty and really <i>light-mouthed</i>.</p>
</body>
</html>

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

追加した英文では、「light-mouthed」について、i要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「light-mouthed」が斜め文字のように表示されています。

i要素は、数字に対してマークアップが可能なのか？

さらに、数字について、i要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i要素</title>
</head>
<body>
    <p>仕事終わりのビールは、<i>五臓六腑</i>に染み渡る。</p>
    <p>仕事終わりのビールは、<i>５臓６腑</i>に染み渡る。</p>
    <p>仕事終わりのビールは、<i>5臓6腑</i>に染み渡る。</p>
</body>
</html>

新たな文章では、「五臓六腑」、「５臓６腑」、「5臓6腑」について、i要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、全角数字（漢数字及び算用数字）、半角数字共に、斜め文字のように表示することができました。

i要素は、カタカナに対してもマークアップできる？

カタカナについても、i要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i要素</title>
</head>
<body>
    <p>最近のコンピュータウィルスは、<i>トロイの木馬</i>として侵入することが多い。</p>
    <p>最近のコンピュータウィルスは、<i>ﾄﾛｲの木馬</i>として侵入することが多い。</p>
</body>
</html>