Part 1. Let's begin CSS : Chapter 4. “要素の操作”

4.5 植字擬似要素

 ここで紹介するのは,“整形後の文書に対してスタイルを適用する”ための方法である。どのように整形されるかは,読者の環境による部分が多いから,これを通常の要素およびクラスなどの枠組みで処理することはできない。そこで,“擬似要素”を導入してこれを実現する。

植字擬似要素

 植字擬似要素は,パラグラフなどのブロックが整形されたときの“1 行め”または“1 文字め”を要素とみなし,特にスタイルを適用させるものである。文書がどう整形されるかは,読者の環境によるところが大きい(1 行めがどこまでかは,読者のブラウザのフォントサイズの設定およびウィンドウ幅などによっていかようにも変わる)。これを文書のソース中に書き込むことはできないから,“擬似的な要素”とみなして解決するのである。

 擬似要素は,擬似クラスと同じく,先頭にコロン「:」を冠している。

:first-line
:first-letter

 これらはセレクタ中で,

P:first-line { ...... }
P:first-letter { ...... }

のように使われる。端的には,前者は“P 要素が整形されたときの 1 行め”,後者は“P 要素が整形されたときの 1 文字め”に適用される。

 当然,もっと複雑なセレクタで使用することもできる。

DIV.article P.headline:first-line { ...... }

ただし,これらの擬似要素はセレクタの末尾でなければならず,“P:first-line EM”のように擬似要素の後にさらにセレクタが続いてはならない。

 なお,植字擬似要素はブロックボックスを描く要素display プロパティblocklist-itemcompactrun-in(および table)の要素)にのみ適用される。

 ちなみに,これら 2 つの擬似要素に関する指定は,無視されても CSS としては正しい実装である。

整形されたブロックの 1 行め::first-line 擬似要素

 :first-line 擬似要素は,整形されたブロックの 1 行めに対して特別にスタイルを適用させるものである。

 :first-line 擬似要素には,適用可能なプロパティが限られている。これを,以下に示す:フォントに関するプロパティ,色に関するプロパティ,背景に関するプロパティ,ならびに,word-spacing プロパティletter-spacing プロパティtext-decoration プロパティvertical-align プロパティtext-transform プロパティline-height プロパティtext-shadow プロパティ,および,clear プロパティ

 :first-line 擬似要素の例をご覧いただこう。

P { font-family: Arial, Helvetica, san-serif; line-height: 130%; color: #000; }
P:first-line { font-variant: small-caps; color: #006; }

<P>Argon (Ar) is discovered by Lord Rayleigh and Sir William Ramsay in 1899. The name comes from the Greek argos, 'inactive'.</P>
<P>Argon is chemically inactive gas, colorless and has no smell. About 1 percent of the atomosphere is made up from argon. Its element number is 18 and its atomic weight is 40. Because of its inactive characteristic, argon is used for tube light.</P>

Argon (Ar) is discovered by Lord Rayleigh and Sir William Ramsay in 1899. The name comes from the Greek argos, 'inactive'.

Argon is chemically inactive gas, colorless and has no smell. About 1 percent of the atomosphere is made up from argon. Its element number is 18 and its atomic weight is 40. Because of its inactive characteristic, argon is used for tube light.

表示領域の幅を変えるなどして,“整形された 1 行め”にスタイルが適用されていることを確認されたい。

IE4, 5
:first-line 擬似要素はサポートされない。

整形されたブロックの 1 文字め::first-letter 擬似要素

 一方,:first-letter 擬似要素は,整形されたブロックの(原則的に)1 文字めに対して特別にスタイルを適用させるものである。

 この :first-letter 擬似要素にも,適用可能なプロパティは限られている。適用されるのは,フォントに関するプロパティ,色に関するプロパティ,背景に関するプロパティ,text-decoration プロパティvertical-align プロパティ(ただし,float プロパティが none のときのみ適用可能),text-transform プロパティline-height プロパティ,マージンに関するプロパティ,パディングに関するプロパティ,枠に関するプロパティ,float プロパティtext-shadow プロパティ,および,clear プロパティである。

 同様に例をご覧いただこう。

P { font-family: Verdana, Arial, Chicago, san-serif; line-height: 130%; color: #000; clear: both; }
P:first-line { font-variant: small-caps; color: #006; }
P:first-letter { font-size: 190%; border: thin solid #009; float: left; padding: 0.1em; margin-right: 0.1em; }

 :first-line 擬似要素と同じ例に対して適用させる。

Argon (Ar) is discovered by Lord Rayleigh and Sir William Ramsay in 1899. The name comes from the Greek argos, 'inactive'.

Argon is chemically inactive gas, colorless and has no smell. About 1 percent of the atomosphere is made up from argon. Its element number is 18 and its atomic weight is 40. Because of its inactive characteristic, argon is used for tube light.

:first-letter 擬似要素は,float プロパティと組み合わせることで 1 文字めを大きくし,後続する文章を回りこませるドロップキャップの効果を実現できる。

 また,上記の例からもわかるように,:first-letter 擬似要素に含まれる文字(列)は,:first-line 擬似要素にも含まれている(藍色で表示されている)。

 さて,:first-letter 擬似要素には原則として最初の 1 文字が属すると述べたが,これが,2 文字以上を含むこともある。要素の先頭の文字が,引用符「"」などの約物の場合,約物でない最初の文字までが,:first-letter 擬似要素に属することになる。

 前掲のスタイルシートで,次の HTML を出力させてみよう。

<P>"Neos" is a greek word which stands for "new". You know, the element name of Neon (Ne) is derived from the word. Neon was discovered by Sir William Ramsay and M. W. Travers in London in 1898.</P>

"Neos" is a greek word which stands for "new". You know, the element name of Neon (Ne) is derived from the word. Neon was discovered by Sir William Ramsay and M. W. Travers in London in 1898.

文頭の 2 文字が,:first-letter 擬似要素に属していることがわかる。

IE4, 5
:first-letter 擬似要素はサポートされない。
NN6
:first-letter 擬似要素に属している文字は,:first-line 擬似要素に属さない。