HTMLのiタグの使い方！アイコン・外国語・専門用語を斜体で表現

html

HTMLのiタグは、テキストを斜体で表示するために使用されるインライン要素です。
しかし、HTML5 においてiタグは、単なる装飾的な斜体表示ではなく、特定の意味合いを持つテキストをマークアップするために用いられるようになりました。

iタグの基本的な使い方と表示

iタグは、斜体で表示したいテキストを囲むだけで使用できます。

<p>この単語は<i>斜体</i>で表示されます。</p>

上記のHTMLは、ブラウザで以下のように表示されます。(Chromeのデフォルト)
この単語は斜体で表示されます。
HTMLのiタグの表示確認

重要な語句にはemタグを使いますが、外国語や思考表現にはiタグを使いましょう。

HTML5におけるiタグのセマンティックな意味合い

HTML5では、iタグは以下の特定の意味合いを持つテキストをマークアップするために使用されるべきです。

  • 外国語の句や単語: 本文とは異なる言語のテキストであることを示します。
  • 専門用語や学術用語: 特定の分野で使われる専門的な言葉であることを示します。
  • 思考や感情: キャラクターの思考や感情などを表すテキスト。
  • アイコンフォント: Font Awesome や Material Icons などのアイコンフォントを表示するための要素として慣習的に使用されます（ただし、これは意味論的には厳密ではありません）。

重要な注意点: 単にテキストを斜体にするためだけの装飾的な目的には、CSS の font-style: italic; を使用するべきです。

iタグにスタイルを適用する

iタグのデフォルトのスタイル（斜体）は、CSSで上書きしたり、さらに他のスタイルを追加したりすることができます。

i.foreign-word {
  font-style: italic;
  color: green;
}

i.technical-term {
  font-style: italic;
  font-weight: bold;
}

.icon {
  font-family: "Font Awesome 5 Free"; /* アイコンフォントを指定 */
  font-weight: 900; /* Font Awesome の場合は太字指定が必要な場合あり */
  font-style: normal; /* 斜体を解除 */
  display: inline-block; /* アイコンの配置を調整 */
}

<p>フランス語で「こんにちは」は <i class="foreign-word">Bonjour</i> です。</p>
<p>この現象は <i class="technical-term">光電効果</i> と呼ばれます。</p>
<p>注意！<i class="icon"></i></p>

上記の例では、クラスを使ってiタグに異なるスタイルを適用しています。
外国語は緑色の斜体、専門用語は太字の斜体、アイコンフォントは斜体を解除して特定のフォントファミリーを指定しています。

ブラウザに実際に表示すると、下記のようになりました。
HTMLのiタグにスタイル適用

iタグの使用例

iタグは、以下のような場面で活用できます。

  • 学術論文や技術文書: 専門用語や外国語の引用をマークアップする。
  • 小説や物語: キャラクターの内面的な思考や強調したい言葉を斜体で表現する。
  • WebサイトのUI: アイコンフォントを表示するために使用する。（CSSと組み合わせて使う）
<p>ギリシャ語では「アルファ」は <i lang="el">ἄλφα</i> と書きます。</p>
<p>彼は心の中で<i>「どうすればいいんだ…」</i>と呟いた。</p>
<p>編集 <i class="fas fa-edit"></i></p>

iタグを使用する際の注意点

  • 装飾目的にはCSSを使用する: 単にテキストを斜体にしたい場合は、<span>タグなどで囲み、CSSのfont-style: italic;を適用するべきです。
  • 意味合いを考慮する: iタグは、HTML5で定義された特定の意味合いを持つテキストに対して使用します。意味のないテキストに乱用するべきではありません。
  • アクセシビリティ: 斜体は、スクリーンリーダーによっては強調として読み上げられない場合があります。重要な情報を斜体だけで表現するのは避け、必要に応じて他の強調方法（<strong> など）と併用することを検討してください。
  • アイコンフォントの代替: アイコン表示には、<img>タグにSVG形式のアイコンを使用したり、CSSのbackground-imageを使用したりするなどの代替手段もあります。意味論的な正確性を重視する場合は、これらの方法も検討しましょう。

iタグの記述例

以下に、様々な状況におけるiタグの記述例を示します。

<p>ラテン語で「例えば」は <i>exempli gratia</i> の略で <i>e.g.</i> と書きます。</p>
<p>彼女は<i>もしかしたら、彼は来ないかもしれない</i>と考えた。</p>
<p>削除 <i class="fas fa-trash-alt"></i></p>

まとめ

iタグは、HTML5において単なる斜体表示だけでなく、外国語、専門用語、思考、アイコンフォントなど、特定の意味合いを持つテキストをマークアップするための要素となりました。
意味論的な正確性を意識し、装飾的な目的にはCSSを使用するなど、適切な使い分けを心がけることが重要です。
アクセシビリティにも配慮し、iタグを効果的に活用しましょう。

HTML
yasuaki

コメント