i 要素「イタリック表記が通例のテキスト」

　i要素は、声や感情を表すテキストの範囲や、分類学上の名称、専門用語、技術用語、多言語のイディオム、思考の内容、船の名前など、印刷慣例ではよくイタリック体で表現することで、他の文章と区別しているようなテキストの範囲に使いますが、他に適切なタグがある場合はそちらを使用してください。

　日本語では、印刷慣例としてイタリック体となるものは、さほど多くありません。しいて言えば、引用などでイタリック体が使われることはありますが、引用の場合は blockquote要素か q要素でマークアップするべきです。そのため、日本語のサイトの場合には、i要素の使いどころがほとんどないかもしれません。

　基本的にイタリック体であるかどうかについては、考えないようにした方が良いでしょう。純粋に、前述の i要素の対象として挙げられたものとしてふさわしいところに使いましょう。

　ただし、日本語においては、イタリック体でレンダリングされることで、かえって読みづらくなったり、不自然に見えることがあります。イタリック体とはアルファベットの書体の1つで、右側に傾いているのが特徴の文字です。指定したフォントの中にイタリック体がない場合は斜体に、イタリック体も斜体もない場合には標準のフォントが斜めに傾けられて表示されますが、日本語フォントの場合はイタリック体や斜体が用意されていることはほとんどないため、多くの場合は標準フォントを斜めに傾けた表示になります。必要に応じて、スタイルシートで、font-styleプロパティを normal にしたり、colorプロパティで色を変えるなどして、日本語として不自然にならないようなスタイルにするのが良いでしょう。

　i要素の使用は非推奨ではありませんが、ただ単にイタリック体でレンダリングされることだけを期待して i要素を使ってはいけません。この指定内容はスタイルシートで代替できるので、できるだけスタイルシートで指定しましょう。スタイルシートで指定した場合は {font-style:italic;} と記述します。

　また、文章や文字の強調が目的の場合は em要素で指定することが推奨されています。em要素と i要素、見た目は同じでも、検索エンジンが「em要素は強調されているので大事な内容」と判断してくれます。キーワードを上位に表示させたい場合は、i要素ではなく em要素を使用するようにしましょう。

i 要素の概要

使用例

i 要素のマークアップ例


<p>私は、<i class="thought">なんてバカなんだ！</i>と心のなかで叫んだ。みんなが、沈んだ船の話をしていたので、てっきり<i class="ship">戦艦大和</i>の話だと思っていたら、どうやら<i class="ship">タイタニック号</i>の話だったらしい。どうりでさっぱり話が通じなかったわけだ。みんなには相当変なヤツと思われたに違いない。まさに、<i class="idiom" lang="en">Oh! My God!</i>って感じだ。</p>

i 要素のスタイル例


i {
	font-style: normal;
	margin-left: 0.3em;
	margin-right: 0.3em;
}

i.thought {
	color: #2e8b57;
}

i.thought:before {
	content: '「';
}

i.thought:after {
	content: '」';
}

i.ship:before {
	content: '『';
}

i.ship:after {
	content: '』';
}

i.idiom {
	font-family: Verdana, Geneva, Arial, Helvetica;
	font-style: italic;
}

i.idiom:before {
	content: '"';
}

i.idiom:after {
	content: '"';
}

i 要素のマークアップ例のサンプル

　私は、なんてバカなんだ！と心のなかで叫んだ。みんなが、沈んだ船の話をしていたので、てっきり戦艦大和の話だと思っていたら、どうやらタイタニック号の話だったらしい。どうりでさっぱり話が通じなかったわけだ。みんなには相当変なヤツと思われたに違いない。まさに、Oh! My God!って感じだ。

　i要素は、様々な目的で利用されます。しかし、その目的によって、スタイルを変えたいと思うことが多いでしょう。そのため、i要素の利用においては、class属性を使って、その用途を区別し、それに応じて別々のスタイルを適用出来るようにすることが、仕様で推奨されています。

　また、他の言語を使ったイディオムで i要素を使う場合は、lang属性を使って、その言語を指定することが推奨されます。

i要素はアイコンフォントに使われることも

　FontAwesomeなどの Webアイコンフォントでは、アイコン表示のために i要素を使われることがあります。

　「i要素はアイコンなどに使う」などという HTMLの決まりはありません。他に適切なタグが無いことと、アイコンは周りのテキストと明確に区別されるべき部分であることから慣習的に i要素が使われています。

　FontAwesomeの読み込み部分は、<head>〜</head> の間に記述します。