Edit

Page

Page title:

Page body:

[1] [[HTML]] の [DFN[[CODE(HTMLe)[i]] 要素型]]の要素は、
[[内容]]を[RUBY[斜体] [イタリック]]で表示するべきものです。

[2] 仕様書:
- [[HTML 4]]
-- 15.2.1 Font style elements: the [CODE(HTMLe)[TT]], [CODE(HTMLe)[I]],
[CODE(HTMLe)[B]], [CODE(HTMLe)[BIG]], [CODE(HTMLe)[SMALL]], [CODE(HTMLe)[STRIKE]], 
[CODE(HTMLe)[S]], and [CODE(HTMLe)[U]] elements
<IW:HTML4:"present/graphics.html#edef-I">

[3]
:状態:[[W3C]] [[勧告]]
:[[名前空間名]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
:[[局所名]]:[CODE(HTMLe)@en[i]] (はじめ [Q@en[[[italic]]]]
([Q[[[斜体]]]])、のち [Q@en[[[instance]]]]
([Q[[[実現値]]]]) より)
:[[開始タグ]]:必須
:[[終了タグ]]:必須
:[[内容模型]]:[CODE(SGML)[(%[[inline]];)*]]
:出現できる文脈:[CODE(SGML)[%inline]] な文脈
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,状態	,出典
,[CODE(HTMLa)[[[class]]]]	,	,	,[[級]]	,[HTML4] %[[coreattr]]
,[CODE(HTMLa)[[[dir]]]]	,	,	,[[書字方向]]	,[HTML4] %[[i18n]]
,[CODE(HTMLa)[[[id]]]]	,	,	,一意識別子	,[HTML4] %coreattr
,[CODE(HTMLa)[[[lang]]]]	,	,	,[[自然言語]]	,[HTML4] %i18n
,[CODE(HTMLa)[[[xml]]:lang]]	,	,	,自然言語	,[XHTML1]
,[CODE(HTMLa)[[[onclick]]]]	,	,	,	,[HTML4] %[[events]]
,[CODE(HTMLa)[[[ondblclick]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeydown]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeypress]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeyup]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmousedown]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmousemove]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseout]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseover]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseup]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,[HTML4] %coreattr
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,[HTML4] %coreattr

[[#comment]]

** 代替

[8] この要素型は'''[RUBYB[非推奨] [deprecated]]'''ではありませんが、
'''[RUBYB[推奨されません] [discouraged]]''' [SRC[HTML 4 15.2]]。
代わりに、[[スタイル・シート]]を利用できます。

[9] 斜体にするためには、 [[CSS]] なら [SAMP(CSS)[[[font-style]]]]
特性を利用できます。

[PRE(CSS style example)[
[VAR@en[element-type]].[VAR@en[class-name]] {
  [[font-style]]: [[italic]];
}
]PRE]

[10] [CODE(HTMLe)@en[[[i]]]] の代わりに使うべき[[要素型]]は、
その部分を[[斜体]]にしたかった理由によって決めます。

- '''強調''' → [CODE(HTMLe)@en[[[em]]]] または [CODE(HTMLe)@en[[[strong]]]]
-- [[HTML]] 部分の例
[PRE(HTML example code)[
It is important to separate structure and presentation.
]PRE]
-- [[CSS]] 部分の例
[PRE(CSS example code)[
em {
 font-style: italic;
}
]PRE]
- '''書名''' → [CODE(HTMLe)@en[[[cite]]]]
-- [[HTML]] 部分の例
[PRE(HTML example code)[
In <cite>The Origin of Structured Markup Languages</cite>, page 231, ...
]PRE]
-- [[CSS]] 部分の例
[PRE(CSS example code)[
cite {
 font-style: italic;
}
]PRE]
- '''引用文''' → [CODE(HTMLe)@en[[[q]]]] または
[CODE(HTMLe)@en[[[blockquote]]]]
-- [[HTML]] 部分の例
[PRE(HTML example code)[
He said that...
<blockquote>
WYSIWYG is not the only solution.
</blockquote>
]PRE]
-- [[CSS]] 部分の例
[PRE(CSS example code)[
blockquote {
 font-style: italic;
}
]PRE]
- [25] '''他の言語''' → [CODE(HTMLe)@en[[[span]]]] 
([CODE(XMLa)@en[[[xml:lang]]]] [[属性]]つき)
-- [[HTML]] 部分の例
[PRE(HTML example code)[
<abbr>A.D.</abbr> stands for Anno Domini.
]PRE]
-- [[CSS]] 部分の例
[PRE(CSS example code)[
:lang(la) {
 font-style: italic;
}
]PRE]
- '''数式の変数''' → [CODE(HTMLe)@en[[[var]]]] または [[MathML]]
の[[要素型]]
-- [[HTML]] 部分の例
[PRE(HTML example code)[
...where <var>n</var> is the number of nodes in the tree.
]PRE]
-- [[CSS]] 部分の例
[PRE(CSS example code)[
var {
 font-style: italic;
}
]PRE]
- '''船の名前'''
-- 適当な[[要素型]]が無いので、 [CODE(HTMLe)@en[[[span]]]] を使います。
-- [[HTML]] 部分の例
[PRE(HTML example code)[
The Queen Elizabeth 2 is an ocean liner.
]PRE]
-- [[CSS]] 部分の例
[PRE(CSS example code)[
span.ship {
 font-style: italic;
}
]PRE]
- '''属名・種名'''
-- 適当な[[要素型]]が無いので、 [CODE(HTMLe)@en[[[span]]]] を使います。
-- [[HTML]] 部分の例
[PRE(HTML example code)[
Tyrannosaurus rex is very, very famous.
]PRE]
-- [[CSS]] 部分の例
[PRE(CSS example code)[
span.species {
 font-style: italic;
}
]PRE]
- '''初出の重要語''' → [CODE(HTMLe)@en[[[dfn]]]]
-- [[HTML]] 部分の例
[PRE(HTML example code)[
These tags, often referred as <dfn>descriptive markups</dfn>, ...
]PRE]
-- [[CSS]] 部分の例
[PRE(CSS example code)[
dfn {
 font-style: italic;
}
]PRE]

[[#comment]]

** 応用

[4] [CODE(HTMLe)[i]] 要素は、フォント・スタイル要素の一種です。
フォント・スタイル要素のレンダリングは [[UA]]
依存で、仕様書では規定されていませんが、[RUBYB[参考] [informative]]として、
[RUBYB[斜体] [italic]]スタイルでレンダリングするとされています。
他のフォント・スタイル要素も含めて入れ子の場合のレンダリングは UA
依存です。 [SRC[HTML 4 15.2.1]]

[5] [CODE(HTMLe)[i]] はいわゆる[[物理要素]]で、
論理的・構造的意味は持たないのですが、
[Q[斜体]]という物理的意味さえ伝わることが保証されないということです。

[6] 多くの (非 text 系) [[視覚UA]] では、 [CODE(HTMLe)[i]] 
要素の内容を斜体でレンダリングします (想定通り)。
しかし、視覚 UA でも text browser 系は、
斜体を表現できないことが多いので、太字, 下線, 違う文字色, 反転,
前後を記号で囲む, 地の文と同じなど、異なる方法でレンダリングすることがあります。

[CODE(HTMLe)[i]] 要素の中に [CODE(HTMLe)[[[b]]]] 要素を入れたり、
その逆にしたりすると[[太字]] + 斜体になるはずですが、
UA のレンダリング能力によってはいずれかだけになることもあります。

[7] [RUBY[斜体] [Italic]]は、本来は[[ラテン文字]]などの書体の一種で、
丸みを帯びたあれ(謎)を指しますが、多くの実装では、
(italic フォントが見つからない場合は、または常に、)
単に通常の文字を傾けたもの ([[oblique]], [[slant]])
を使っています。

[[#comment]]

** 不思議解釈

[11]
[CITE[ほぷしぃ−HTMLタグリファレンス 〜I〜]] 
<http://www.isl.ne.jp/pc/100/tagRef_007.html>
(2005年7月現在)

この文書では [CODE(HTMLe)@en[i]] 要素が

> '''html4.01非推奨、Netscape専用タグ'''

と紹介されています。普通 [[HTML]] の [Q@en[[[deprecated]]]]
は[Q[[[非推奨]]]]と訳されるので [Q@en[deprecated]]
とされていない [CODE(HTMLe)@en[i]] をこう紹介するのは望ましくありませんが、
実際推奨しないと [[HTML 4]] には書いてあるので、間違ってはいません。

問題は [Q[Netscape専用]]と主張していることです。
根拠はありませんし、事実にも反します。

[[#comment]]

** 例

[10] 引用文献名をマークした例
[PRE(HTML deprecated example)[
<[CODE(HTMLe)[p]] [CODE(HTMLa)[class]]="NormRefDef"><[CODE(HTMLe)[a]] [CODE(HTMLa)[name]]="2-ISO-9899">ISO/IEC
9899:1990(R1997)</[CODE(HTMLe)[a]]>, <[CODE(HTMLe)[i]]>Programming languages — C</[CODE(HTMLe)[i]]>.</[CODE(HTMLe)[p]]>
]PRE]

この例の場合、 [CODE(HTMLe)[[[cite]]]] 
要素型を使った方がより好ましいと考えられます。

出典: 
[CITE[Portable Network Graphics (PNG) Specification (Second Edition)]] 
<http://www.w3.org/TR/2003/REC-PNG-20031110/#2-ISO-9899>

* 歴史

** [CODE[i]] の誕生

[SEE[ [[語句化内容]] ]]

[FIG(data)[ [55] [[HTML要素概説]]

:[F[要素名]]:[CODE[i]]
:借用先:[[HDML]]

]FIG]

** HTML5

-[12]
[CITE[www-html@w3.org from December 1997: Re: Comments on HTMl 4 draft (9/Nov/1997)]] <http://lists.w3.org/Archives/Public/www-html/1997Dec/0064.html>
-[31] 
[CITE@en[Ian Hickson's Internet Projects]], [[Ian Hickson]], [TIME[2024-08-26T03:37:26.000Z]], [TIME[2000-06-16T00:36:23.924Z]] <https://web.archive.org/web/20000616003523/http://www.bath.ac.uk/~py8ieh/internet/home.html#html>

[28] 
>>12 この [CODE[i]] を換骨奪胎して再利用する案は[TIME[西暦2005年][2005]]になって提案者
[[Ian Hickson]] 自身によって実現されました。
[SEE[ [[WA1]] の歴史の項 ]]

[FIG(data)[ [118] [[HTML要素概説]]

:[F[要素名]]:[CODE[i]]
:[F[要素名]]:[CODE[x]]
:日付:[TIME[2006-10-26]]
:説明:
[TIME[2006-10-26]]、
[CITE[HTML5]]
の
[CODE[i]]
は
[CODE[x]]
に改称された。
:出典:
[REFS[

- [CITE[HTML5 r208]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2006-10-26 08:07:25 +09:00]], [TIME[2024-09-01T10:12:50.000Z]] <https://github.com/whatwg/html/commit/4075f1e21b142f4fc05188f4f0239260662c49a7>

]REFS]

]FIG]

** [CODE[x]], [CODE[t]]

[33] [CITE@en[<x> -> <t>]], [[Hixie]], [TIME[2006-11-23 11:04:15 +09:00]], [TIME[2024-09-01T12:20:04.000Z]] <https://github.com/whatwg/html/commit/6ea26c5e3b39bb8ad99d6e5b14747b10d0a6b3d4#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>

[FIG(data)[ [32] [[HTML要素概説]]

:[F[要素名]]:[CODE[x]]
:[F[要素名]]:[CODE[t]]
:日付:[TIME[2006-11-23T11:04:15+09:00]]
:説明:
[TIME[2006-11-23]]、
[CITE[HTML5]]
の
[CODE[x]]
は
[CODE[t]]
に改称された。
:出典:
[REFS[

- [CITE[HTML5 r360]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2006-11-23 11:04:15 +09:00]], [TIME[2024-09-01T12:20:04.000Z]] <https://github.com/whatwg/html/commit/6ea26c5e3b39bb8ad99d6e5b14747b10d0a6b3d4>

]REFS]

]FIG]

;; [34] 同時に旧 [CODE[t]] は [CODE[time]] に改称されました。

[35] [CITE@en[inter-element whitespace and comments should not affect algorithms; b…]], [[Hixie]], [TIME[2006-12-22 10:07:05 +09:00]], [TIME[2024-09-01T12:35:32.000Z]] <https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>

[FIG(data)[ [36] [[HTML要素概説]]

:[F[要素名]]:[CODE[t]]
:日付:[TIME[2006-12-22]]
:説明:
[TIME[2006-12-22]]、
[CITE[HTML5]]
は
[CODE[t]]
を削除した。
:出典:
[REFS[

- [CITE[HTML5 r456]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2006-12-22 10:07:05 +09:00]], [TIME[2024-09-01T12:35:32.000Z]] <https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207>

]REFS]

]FIG]

- [29] 
[CITE@en[inter-element whitespace and comments should not affect algorithms; b…]], [[Hixie]], [TIME[2006-12-22 10:07:05 +09:00]], [TIME[2022-11-13T05:27:11.000Z]] <https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>

[30] [CODE[i]], [CODE[b]], [CODE[div]] が同時追加

[13]
[CITE[gmane.comp.web.w3m.devel]] <http://permalink.gmane.org/gmane.comp.web.w3m.devel/863>
([[名無しさん]] [WEAK[2006-12-18 12:05:05 +00:00]])

[14]
[CITE[[w3m-dev 04190] patches added to CVS repository]] <http://permalink.gmane.org/gmane.comp.web.w3m.devel/856>
([[名無しさん]] [WEAK[2006-12-18 12:06:28 +00:00]])

[15]
[CITE[[w3m-dev 04191] Re: italics in emacs-w3m]] <http://permalink.gmane.org/gmane.comp.web.w3m.devel/857>
([[名無しさん]] [WEAK[2006-12-18 12:07:00 +00:00]])

[16]
[CITE[講演申込手順]] ([TIME[2007-12-06 10:30:27 +09:00]] 版) <https://secure1.gakkai-web.net/gakkai/ieice/kaikoku/tejun.html>

>c.特殊な表記の方法
講演題目や講演要旨原稿の中の添字や斜体等は以下のようにHTMLのタグコード(以下の、、、など)で入力して下さい.
-上付き文字: 	対象文字
-下付き文字: 	対象文字
-斜体字: 	対象文字

[17] [CITE[IRC logs: freenode / #whatwg / 20110414]]
( ([TIME[2011-04-16 20:30:22 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20110414>

[18] [CITE[IRC logs: freenode / #whatwg / 20110505]]
( ([TIME[2011-05-07 13:59:30 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20110505>

[20] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:39:57 +09:00]] 版))
<https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L1026>

** 絵文字への流用 (濫用)

[39] 関連: [[絵文字]], [[アイコンフォント]]

-[19] [CITE@en[Base · Bootstrap]]
( ([[]] 著, [TIME[2012-12-22 03:04:10 +09:00]] 版))
<http://twitter.github.com/bootstrap/base-css.html#icons>
-- [38] [CITE@en[Bootstrap, from Twitter]], [TIME[2024-09-08T09:20:10.000Z]], [TIME[2012-02-04T01:04:29.877Z]] <https://web.archive.org/web/20120204010350/http://twitter.github.com/bootstrap/base-css.html#icons>

[47] >>38

>With v2.0.0, we have opted to use an [CODE[]] tag for all our icons, [SNIP[]]

- [50] [CITE@en[tweaks abound, updated prettify styles, new sidenav component started…]], [[mdo]], [TIME[2012-01-05 18:34:14 +09:00]], [TIME[2024-09-08T10:22:24.000Z]] <https://github.com/twbs/bootstrap/commit/fb9401b355366452d310d39f51224999da4daa82>

[51] >>50 が [CODE[i]] が追加されたコミット。

[52] >>50

> With v2.0.0, the <code>&lt;i&gt;</code> tag is essentially dedicated to iconography.[SNIP[]]

> // As of v2.0.0, the tag is reserved for icons from the Glyphicons set.

[53] >>52 の当初の文言は >>47 よりも強く、 [CODE[i]] が完全にアイコン専用とされている。

[FIG(data)[ [54] [[HTML要素概説]]

:[F[要素名]]:[CODE[i]]
:日付:[TIME[2012-01-31]]
:説明:
[TIME[2012-01-31]]公開の
[[Bootstrap]]
は、
[[アイコン]]機能のため
[CODE[i]]
を利用した。
[SRC[>>56]]
この用法はどの [[HTML]] 仕様とも整合せず濫用に当たるが、
これ以後多くの[[アイコン]]や[[絵文字]]用のライブラリー等に模倣され、
現在もかなり使われている。
:出典:
[REFS[

-
[56] 
[DFN[BOOTSTRAP:TWEAKS]]:
[CITE@en[tweaks abound, updated prettify styles, new sidenav component started…]], 
[DATA(.author)[[[mdo]]]], 
[TIME(.published)[2012-01-05 18:34:14 +09:00]], [TIME[2024-09-08T10:22:24.000Z]] <https://github.com/twbs/bootstrap/commit/fb9401b355366452d310d39f51224999da4daa82>

]REFS]
:注釈:
-
[DFN@en[Bootstrap]]
[[Twitter]]
社の汎用
[[CSS]]
ライブラリー。
[[平成時代]]後期に世界的に人気を博した。

]FIG]

- [48] [CITE@en[Icons as font instead of img · Issue #966 · twbs/bootstrap · GitHub]], [TIME[2024-09-08T10:16:41.000Z]] <https://github.com/twbs/bootstrap/issues/966>

[49] >>48 に >>45 作者も投稿している。

- [45] [CITE@en[Font Awesome, the iconic font designed for use with Twitter Bootstrap]], [TIME[2024-09-08T09:52:53.000Z]], [TIME[2012-03-09T00:07:42.165Z]] <https://web.archive.org/web/20120309000714/http://fortawesome.github.com/Font-Awesome/>
- [21] [CITE@en[Font Awesome Examples]]
( ([[Dave Gandy]] 著, [TIME[2014-08-04 17:31:34 +09:00]] 版))
<http://fontawesome.io/examples/>
-- 
[37] [CITE@en[Font Awesome Examples]], [[Dave Gandy]], [TIME[2024-09-08T09:17:15.000Z]] <https://fontawesome.com/v3/examples/>

[46] >>45 が現存最古? [CITE[Font Awesome 1]] (1.0.0) は[TIME[2012-03-03]]公開とのこと。

- [42] [CITE@en[Inconsistent use of and across material.io and documentation · Issue #1007 · google/material-design-icons · GitHub]], [TIME[2024-09-08T09:44:10.000Z]] <https://github.com/google/material-design-icons/issues/1007>
-- [40] [CITE@en[Use instead of for icon HTML element, for examples too]], [[RoelN]], [TIME[2021-02-03 00:12:22 +09:00]], [TIME[2024-09-08T09:43:42.000Z]] <https://github.com/google/material-design-icons/commit/6eed39a37d4d9aa0aaf7831eae80b34ede668a57>
-- [41] [CITE@en[Use instead of for icon HTML element]], [[RoelN]], [TIME[2021-01-26 01:02:49 +09:00]], [TIME[2024-09-08T09:44:03.000Z]] <https://github.com/google/material-design-icons/commit/b9f25299148e3250a83a77b36a07b806ed2ea651>
-- [44] [CITE@ja-x-mtfrom-en[マテリアル アイコンガイド | Google Fonts | Google for Developers]], [TIME[2024-08-22T09:57:52.000Z]], [TIME[2024-09-08T09:45:06.881Z]] <https://developers.google.com/fonts/docs/material_icons?hl=ja>

[43] >>42 [[Google]] の [[material design]]。[TIME[西暦2014年][2014]]から
[CODE[i]] を使っていた模様だが、今は [CODE[span]] にあらためている [SRC[>>44]]。

[22] [CITE@en[Explain better when to use instead of · whatwg/html@19a59f0]]
([TIME[2015-12-21 11:34:36 +09:00]] 版)
<https://github.com/whatwg/html/commit/19a59f050decea91310724061afe3f4621844909>

[23] Mil ([[ミール]]) のように[[宇宙船]]も[[海]]の[[船]]同様に[[イタリック]]を使うようです。

[FIG(quote)[
[FIGCAPTION[
[24] [CITE@ja[必ず覚えておきたいHTML5の特徴と新機能/HTML5完全読本#1-1 | HTML5完全読本―実践テクニックとWebデザインの最新動向 | Web担当者Forum]]
([[鈴木 雄太(株式会社トライフォート)]] 著, [TIME[2016-02-01 23:04:11 +09:00]] 版)
<http://web-tan.forum.impressrd.jp/e/2014/04/24/17355>
]FIGCAPTION]

> 	イタリック体	声や考えていることなど、他と区別したいテキストを表す

]FIG]

[26] [CITE@en['''['''css-display''']''' Convert autolinks.]]
([[tabatkins]]著, [TIME[2017-05-16 08:27:40 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/a518110243c5a7a31d58961163a5c05632d9bc87>

[27] [CITE@en[ auto linking can get deprecated and removed · Issue #1042 · tabatkins/bikeshed]]
([TIME[2017-10-11 10:26:30 +09:00]])
<https://github.com/tabatkins/bikeshed/issues/1042>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)