Edit

Page

Page title:

Page body:

[4] [DFN[[CODE(CSS)@en[[[::first-letter]]]]]] [[擬似要素]]は[[要素]]の[[最初のletter]] を表します。
これは [[initial caps]] ([[drop caps]]) を実現するのに便利です。 [SRC[>>5]]

* 仕様書

[REFS[
- [47] [CITE@en[CSS Pseudo-Elements Module Level 4]], [TIME[2020-12-05T08:14:37.000Z]], [TIME[2020-12-06T02:44:06.607Z]] <https://drafts.csswg.org/css-pseudo/#selectordef-first-letter>
]REFS]

* 適用対象

[19] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]は
[[CSS]] では[[ブロック水準包含子]] ([[ブロック]]、[[list-item]]、[[table-cell]]、
[[table-caption]]、[[inline-block]] など) に適用されます。 [SRC[>>5]]

[20] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]は[[テキスト]]を含むか、同じ[[フロー]]にあって[[テキスト]]を含む[[子孫]]を持つ[[要素]]で使うことができます。
[SRC[>>5]]

* 最初の letter

[9] 「[[最初のletter]]」でいう [[letter]] には[RUBYB[[[数字]]]@en[digit]] も含まれます。 [SRC[>>5]]

[6] [[要素]]の最初が[[画像]]や[[行内表]]や [[inline-block]] など[[文字]]以外の[[内容]]なら、「最初の [[letter]]」
はありません。 [SRC[>>5]]

[EG[
[24] 例えば
[PRE(HTML example code)[
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>
]PRE]
... は最初の文字に当たる部分が [[inline-block]] であるため、 [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]が存在しません [SRC[>>5]]。
]EG]

[17] 「最初の [[letter]]」は「[[最初の書式付き行]]」 ([CODE(CSS)@en[[[::first-line]]]])
に含まれているものです。 [SRC[>>5]]

[EG[
[18] 例えば
[PRE(HTML example code)[
<p><br>First...
]PRE]
... は最初の行が空で何も [[letter]] を含まないので、 [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]は作られません。 [SRC[>>5]]
]EG]

[7] 最初の [[letter]] の前後に[RUBYB[[[句読点]]]@en[punctuation]]
([[Ps]], [[Pe]], [[Pi]], [[Pf]], [[Po]] の[[文字]]) があるなら、これも含める[['''べきです''']]。
[SRC[>>5]]

[8] 最初の [[letter]] の前の[[引用符]]も含める[['''べきです''']]。 [SRC[>>5]]

[10] [[結合文字]]や[[言語]]ごとの規則などにより、句読点でない最初の[[文字]]の後に来る文字も含めるべきであることもあります。
「最初の [[letter]]」には少なくても [[default grapheme cluster]] [SRC[[[UAX #29]]]] を含めるべきであり、
必要なら更に後まで含めても構いません。 [SRC[>>5]]

[EG[
[11] 例えば[[ドイツ語]]では[[要素]]のはじめが「ij」ならこの2文字を共に「最初の [[letter]]」
として扱うべきです。 [SRC[>>5]]
]EG]

* 架空タグ列

[21] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]も [CODE(CSS)@en[[[::first-line]]]]
[[擬似要素]]と同じ[[架空タグ列]]により適用される範囲が説明されています。

[22] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]の[[架空開始タグ]]は最初の[[テキスト]]の直前にあるものとする[['''べきです''']]
[SRC[>>5]]。

[EG[
[23] 例えば
[PRE(HTML example code)[
<div>
<p>The first text.
]PRE]
... の[[架空タグ列]]は
[PRE(HTML example code)[
<div>
<p><div::first-letter><p::first-letter>T</p::first-letter></div::first-letter>he first text.
]PRE]
... となります [SRC[>>5]]。 [CODE(HTMLe)@en[[[div]]]] の最初の[[テキスト]]は
[CODE(HTMLe)@en[[[p]]]] 内にあるので、架空開始タグもその中となります。
[CODE(HTMLe)@en[[[p]]]] の[[擬似要素]]は [CODE(HTMLe)@en[[[div]]]] の[[擬似要素]]の内側となります。
]EG]

;; [35] [CODE(CSS)@en[[[::first-line]]]] は[[ブロック]]である要素の内側で[[行内水準要素]]よりは外側に[[架空開始タグ]]を挿入しますが、
[CODE(CSS)@en[[[::first-letter]]]] はより内側に[[架空開始タグ]]を挿入することになります。

[12] 「最初の [[letter]]」が他の[[要素]]にまたがる場合には一方または両方の[[要素]]から [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]を作成しても構いませんし、[[擬似要素]]を作成しなくても構いません。 [SRC[>>5]]

[EG[
[13] 例えば
[PRE(HTML example code)[
<p>'<em>T...
]PRE]
... は「'T」が [CODE(CSS)@en[[[::first-letter]]]] に含まれるべきところですが、[[子要素]]にまたがっているので、
どちらか1文字だけ、2文字とも、あるいは[[擬似要素]]なしのいずれかを[[利用者エージェント]]は選ぶことができます。
[SRC[>>5]]
]EG]

[14] 最初の [[letter]] が ([[bidi]] などの理由で) [[行]]の先頭に来ない時も、
[[擬似要素]]を作らなくても構いません。 [SRC[>>5]]

* 他の擬似要素との関係

[25] [CODE(CSS)@en['[[list-item]]']] では、 [[principle box]] の最初の [[letter]] が [CODE(CSS)@en[[[::first-letter]]]]
となります。 [[marker]] は [CODE(CSS)@en[[[::first-letter]]]] ではありません。 [SRC[>>5]]

[26] ただし [CODE(CSS)@en['[[list-style-position]]: [[inside]]']] のときは 
[CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]を無視して[['''構いません''']] [SRC[>>5]]。

[27] [CODE(CSS)@en[[[::before]]]] や [CODE(CSS)@en[[[::after]]]] は、最初の [[letter]]
の対象に含まれています。 [SRC[>>5]]

[EG[
[28] 例えば 
[PRE(CSS example code)[
p::before {content: "Note: "}
]PRE]
... が適用される[[要素]]の [CODE(CSS)@en[[[::first-letter]]]] には「N」が含まれます。 [SRC[>>5]]
]EG]

* 継承

[15] [[継承]]は [CODE(CSS)@en[[[::first-line]]]] 同様に[[架空タグ列]]によって説明されています。
[[擬似要素]]はそれが含まれる[[擬似要素]]や[[要素]]から[[継承]]します。

[EG[
[16] 例えば
[PRE(HTML example code)[
<P>Some text that ends up on two lines</P>
]PRE]
... に
[PRE(CSS example code)[
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
]PRE]
... が適用されると、[[架空タグ列]]は
[PRE(HTML example code)[
<P>
<P::first-line>
<P::first-letter> 
S 
</P::first-letter>ome text that 
</P::first-line> 
ends up on two lines 
</P>
]PRE]
... となります。「S」は 24pt、青色でレンダリングされます。 [SRC[>>5]]
]EG]

* レンダリング

[29] [CODE(CSS)@en['[[float]]']] [[特性]]の値が [CODE(CSS)@en['[[none]]']] であれば、
[[行内水準要素]]と同様に扱われます。 [SRC[>>5]]

[30] [CODE(CSS)@en['[[float]]']] [[特性]]の値がそれ以外なら、[[浮動要素]]と同様に扱われます。
[SRC[>>5]]

[31] 次の[[特性]]が適用されます。 [SRC[>>5]]
- [[フォント特性]]
- [CODE(CSS)@en['[[text-decoration]]']]
- [CODE(CSS)@en['[[text-transform]]']]
- [CODE(CSS)@en['[[letter-spacing]]']]
- [CODE(CSS)@en['[[word-spacing]]']] (適当な場合のみ)
- [CODE(CSS)@en['[[line-height]]']]
- [CODE(CSS)@en['[[float]]']]
- [CODE(CSS)@en['[[vertical-align]]']] (>>29 のみ)
- [[余白特性]]
- [[枠線特性]]
- [[色特性]]
- [[背景特性]]
- 他の[[特性]]を適用して[['''構いません''']]。

[32] [[drop cap]] / [[initial cap]] の適切な[[レンダリング]]のために、 [[line-height]], [[width]],
[[height]] を普通の[[要素]]とは違って [[letter]] の形に基づき決定して[['''構いません''']]。
[[フォント]]の大きさを近似して[['''構いません''']]。
書式付けに当たって[[グリフ]]の輪郭を考慮して[['''構いません''']]。 [SRC[>>5]]

* 歴史

** CSS1

[REFS[
- [39] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:57:01 +09:00]] 版) <http://www.w3.org/TR/WD-css1-951209.html#typo>
- [41] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:57:03 +09:00]] 版) <http://www.w3.org/TR/WD-css1-951222.html#typo>
- [38] [CITE[Cascading Style Sheets, level 1]] ([TIME[2008-04-10 02:23:32 +09:00]] 版) <http://www.w3.org/TR/CSS1/#the-first-line-pseudo-element>
]REFS]

[40] >>39 で [DFN[[CODE(CSS)@en[[[:initial]]]]]] [[擬似クラス]]として追加されました。
(当時は[[擬似要素]]はありませんでした。)

[42] >>41 で [CODE(CSS)@en[[[:first-letter]]]] [[擬似クラス]]に改称されました。

[37] [[CSS1中核]]では[[特性]]の一部または全部を[[無視]]してもよいとされていました。

** CSS2

[REFS[
- [36] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#first-letter>
- [48] [CITE@en[CSS 2]], [TIME[2020-12-05T08:16:39.000Z]], [TIME[2020-12-06T02:45:01.465Z]] <https://drafts.csswg.org/css2/#ctrlchars>
]REFS]

* 例

[EG[
[33] [[CSS]]
[PRE(CSS example code)[
p { line-height: 1.1 }
p::first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
]PRE]
... と [[HTML]]
[PRE(HTML example code)[
<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
Erbarremt over my en mijn benaeuwde vesten<br>
En arme burgery, en op mijn volcx gebed<br>
En dagelix geschrey de bange stad ontzet.
]PRE]
... を組み合わせると <http://www.w3.org/TR/selectors/initial-cap.png> のようにレンダリングされます。

[[架空開始タグ]]は「H」の直前に挿入されるので、継承順序より「H」は [CODE(CSS)@en['[[font-weight]]: [[normal]]']]
となります。またその [CODE(CSS)@en['[[line-height]]']] は本来 [CODE(CSS)@en['1.1']] ですが、 >>32
より適切な必要十分の行間でレンダリングされます。 [SRC[>>5]]
]EG]

[EG[
[34] [[CSS]]
[PRE(CSS example code)[
   P               { font-size: 12pt; line-height: 1.2 }
   P::first-letter { font-size: 200%; font-weight: bold; float: left }
   SPAN            { text-transform: uppercase }
]PRE]
... と [[HTML]]
[PRE(HTML example code)[
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
]PRE]
... は <http://www.w3.org/TR/selectors/first-letter.png> のようにレンダリングされます。 [SRC[>>5]]

[CODE(CSS)@en['[[float]]']] によって「T」は最初の行と2行目にまたがってレンダリングされるようになります。
[CODE(CSS)@en['[[line-height]]']] は本来 [CODE(CSS)['1.2']] ですが、やはり >>32 により必要十分なだけの行間になります。
]EG]

* メモ

[1]
[CITE[hail2u.net - Weblog - :first-letter擬似要素と各擬似クラス絡みのInternet Explorer 6のバグ]] <http://hail2u.net/blog/webdesign/first-letter-and-msie-6.html>
([[名無しさん]] [WEAK[2006-08-23 00:10:27 +00:00]])

[2]
[CITE@ja[TextノードをDOMツリーから取り除いたとき、first-letter擬似要素内の文字として扱われている文字だけ残る]] ([CODE[2007-03-08 17:44:44 +09:00]] 版) <http://quaa.jf.land.to/opera/first-letter>
([[名無しさん]] [WEAK[2007-03-08 11:36:59 +00:00]])

[3]
[CITE@ja[IEでfirst-letter疑似要素のセレクタが変:メモランダム]] ([TIME[2007-04-03 04:17:47 +09:00]] 版) <http://mynotes.jp/blog/2007/03/ie_first_letter>

[43] [CITE@en[CSS Values and Units Module Level 3]]
( ([TIME[2013-08-23 23:29:23 +09:00]] 版))
<http://dev.w3.org/csswg/css-values/#common-keywords>

[44] [CITE@en[CSS Cascading and Inheritance Level 3]]
( ([TIME[2013-08-23 11:38:39 +09:00]] 版))
<http://dev.w3.org/csswg/css-cascade/#initial>

[45] [CITE@en['''['''css-pseudo-4''']''' Remove special float case of ::first-letter per WG res…]]
( ([[fantasai]]著, [TIME[2016-06-03 06:53:55 +09:00]]))
<https://github.com/w3c/csswg-drafts/commit/74154b526a68af559988829c1a2daa2b1ffa45bc>

[46] [CITE@en['''['''css-pseudo-4''']''' `::nth-letter` pseudo-element · Issue #3208 · w3c/csswg-drafts]]
([TIME[2018-10-27 02:01:48 +09:00]])
<https://github.com/w3c/csswg-drafts/issues/3208>

- [5] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#first-letter>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)