[4] [DFN[[CODE(CSS)@en[[[::first-letter]]]]]] [[擬似要素]]は[[要素]]の最初の [[letter]] を表します。 これは [[initial caps]] ([[drop caps]]) を実現するのに便利です。 [SRC[>>5]] * 仕様書 [REFS[ - [5] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ]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)[

Hello
Goodbye

etcetera
]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)[


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)[

The first text. ]PRE] ... の[[架空タグ列]]は [PRE(HTML example code)[

The 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)[

'T... ]PRE] ... は「'T」が [CODE(CSS)@en[[[::first-element]]]] に含まれるべきところですが、[[子要素]]にまたがっているので、 どちらか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)[

Some text that ends up on two lines

]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)[

S ome text that ends up on two lines

]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]] * 歴史 ** CSS2 [REFS[ - [36] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) ]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)[

Het hemelsche gerecht heeft zich ten lange lesten
Erbarremt over my en mijn benaeuwde vesten
En arme burgery, en op mijn volcx gebed
En dagelix geschrey de bange stad ontzet. ]PRE] ... を組み合わせると のようにレンダリングされます。 [[架空開始タグ]]は「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)[

The first few words of an article in The Economist.

]PRE] ... は のようにレンダリングされます。 [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のバグ]] ([[名無しさん]] [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]] 版) ([[名無しさん]] [WEAK[2007-03-08 11:36:59 +00:00]]) [3] [CITE@ja[IEでfirst-letter疑似要素のセレクタが変:メモランダム]] ([TIME[2007-04-03 04:17:47 +09:00]] 版)