<i>

区別したいテキストを表す

HTML1.0 ~ 利用可能

最終更新日: 2020.09.14

どんなタグ?
テキストの一部を他と区別する時に
この<i>タグを使う。

コードサンプル
<p>
  <i>タイタニック号</i>の主機関は、<i>レシプロ蒸気機関</i>2基とタービン1基で構成されていた。
</p>

<i>タグは元々はitalic(イタリック)の略で、 <i> ~ </i>で挟まれた範囲が、他の部分とは異なる質であることを表すタグです。 例えば、分類学上の名称(いわゆる学名)、専門用語、外国語の慣用句、字訳(トランスリタレーション)、思考内容、船名などに適用します。 HTML4.01まではテキストをイタリック体で表示する為のタグでしたがHTML5では意味が変更されました(MDNの解釈では、変更後の i はidiomatic(イディオマティック)の略)。

どのカテゴリに属しているの?
i要素は フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属している要素です。
梱包できるタグは?
i要素に梱包できるタグコンテンツ・モデルは、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。

アバター英文ではイタリック体を使うような部分が<i>タグで囲む範囲です。

どうやって使うの?
文中で区別したい範囲を
<i> タグで挟む。

<i>タグは、専門用語や思考内容などの文中で区別したい範囲<i></i> で挟みます。

使い方
<i>区別したい(質が異なる)テキスト</i>
コードサンプル
<p>
  <i>UNIX時間</i>は、<i>UNIXエポック</i>(<time datetime="1970-01-01T00:00:00Z">1970年1月1日午前0時0分0秒</time>)からの経過秒数として表される。
</p>
ブラウザでの表示例
https://codehero.shibajuku.net/html/i/sample01/
どこでも使えるの?
<i>タグは フレージング・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
<i>タグで囲った部分は、一般的なブラウザでは斜体で表示されますが、斜体にする目的で使用するのはやめましょう。 また、<em>タグ、<strong>タグ、<cite>タグ、 <dfn>タグなど、別のタグの方が適切な場合もあるので、よく検討してから使用してください。

アバター書き方は簡単だけど、他のタグとの使い分けに少し気をつける必要がありますね。

使える属性は?
グローバル属性のみ。

<i> タグには、どの要素にでも使えるグローバル属性のみが使えます。その中で、lang属性は、<i>タグで外国語を囲む場合には記述すべきとされています。また、class属性は、<i>タグを使用する理由を明確にする為に使用できます。

アバターclass属性やlang属性はよく使われるようです。

サンプルが見たい
<i>タグを使ったサンプルを
いくつか紹介。

<i> タグを使ったサンプルを紹介します。

基本的な<i>タグのサンプル

コードサンプル
<p>
  山道を登りながら<i>智に働けば角が立つ</i>と考えた。
</p>
ブラウザでの表示例
https://codehero.shibajuku.net/html/i/sample02/

class 属性を使ったサンプル

コードサンプル
<p>
  日本国内でペットとして飼われているネコ(家猫 <i class="taxonomy">Felis silvestris catus</i>)は970万頭を越えている。
</p>
ブラウザでの表示例
https://codehero.shibajuku.net/html/i/sample03/

lang 属性を使ったサンプル

コードサンプル
<p>
  DRY原則(<i lang="en">Don’t Repeat Yourself</i>:繰り返しを避けること)はとても重要な考え方だ。
</p>
ブラウザでの表示例
https://codehero.shibajuku.net/html/i/sample04/

アバター色々な意味合いで使えるタグだから、誰が見ても使った理由が分かるように、属性を書いた方が良さそうですね。

デフォルトスタイルは?
斜体で表示される。

一般的なブラウザで i 要素を表示した場合、斜体で表示されます。
具体的には、下記のCSSと同等のスタイルが適用されます。

i 要素のデフォルトスタイル
i {
  font-style: italic;
}

アバター斜体を使いたいだけならCSSでスタイルを変更しましょう。逆に i 要素内のテキスト表示を通常体に戻す場合もCSSでスタイルを変更します。

対応ブラウザは?
基本的にどのブラウザでも大丈夫。

<i>タグは HTML1から利用可能で、主に以下のブラウザが対応しています。

Internet Explorer
Internet Explorer あり
Edge
Edge 12 ~
Google Chrome
Google Chrome 1 ~
Firefox
Firefox 1 ~
Safari
Safari あり
Opera
Opera あり

アバターどのブラウザも問題ありません。

このリファレンスを書いた人

アバター

ブガ郎

スクレイピング学習の為にHTMLを調べている内に、Web制作の方が面白くなってしまいました。 Uターンした北海道南西部で、雪掻きしながら(冬季限定)細々と生きています。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて