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

Program

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

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>5臓6腑</i>に染み渡る。</p>
    <p>仕事終わりのビールは、<i>5臓6腑</i>に染み渡る。</p>
</body>
</html>

新たな文章では、「五臓六腑」、「5臓6腑」、「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>

新しい文章では、「トロイの木馬」と「トロイの木馬」について、i要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、全角カタカナ、半角カタカナ共に、斜め文字のように表示することができました。

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

また、i要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

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

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

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