E::first-letter

擬似要素について

E 要素の最初の１文字目に対してスタイルが適用されます。要素の前に画像やインラインテーブルなどの他の内容がある場合はマッチしません。

::first-letter 擬似要素は、block、list-item、table-cell、table-caption、inline-block などブロック的なコンテナに適用されます。
::first-letter 擬似要素は、テキストを含む要素、または同じフローにある子孫がテキストを持つ場合に利用できます。

適用できるプロパティは、font 関連プロパティ、text-decoration、text-transform、letter-spacing、word-spacing (適切な場合)、line-height、float、vertical-align ( float が none の場合のみ)、 margin 関連プロパティ、padding 関連プロパティ、border 関連プロパティ、color 関連プロパティ、background 関連プロパティとなります。 （UA は他のプロパティも適用できます。）

example

p::first-letter { color: red; font-size: 32pt; }

source

display

最初の文字が数字である場合にも適用されます。

display

最初の文字は 最初の行内に含まれていないといけません。

example

<p><br> First... 

上記の例では、最初の行には何も含まれていません。ですので、First という単語の F にマッチすることはありません。 ( br は HTML4 のデフォルトスタイルを想定）

最初の文字が同じ要素に無い場合、

example

<p> ' <em> Test </em></p>

上記の例のように、最初の文字が 'T となるような場合、UA は、どちらかの要素に擬似要素を生成したり、両方の要素に擬似要素を生成したり、擬似要素を生成しないといったことができます。

display

※ p::first-letter に赤、em::first-letter に緑を指定しています。ブラウザによって表示のされ方が違います。

最初の行に最初の文字がない場合も同じく、UA は擬似要素を生成しないといったことができます。

次の例は、::first-letter 擬似要素と ::first-line 擬似要素 が、互いにどう関係しあうかを示しています。

example

p { color: deepskyblue; font-size: 14pt; }
p::first-letter { color: red; font-size: 200%; }
p::first-line { color: hotpink; }

display

各 p 要素の最初の文字は フォントサイズが 28pt で、赤色（red）となり、最初の行は ピンク（hotpink）、２行目以降は水色（deepskyblue）となっています。 架空タグ列は以下のような感じになります。（" と笑い " 以降が２行目とする。）

fictional tag

<p>
 <p::first-line>
  <p::first-letter>
   ク
  </p::first-letter>
  リスマスに推薦したい映画の一つに、「あなたが寝てる間に」という映画があります。
  こちらもサンドラ・ブロック主演で、愛
 </p::first-line>
 と笑いが溢れるストーリーとなってます。
 孤独な女性が恋人と家族を一度に手に入れるクリスマスの奇跡を是非ご堪能ください。
</p>

::first-letter 擬似要素は ::first-line 擬似要素の内側にあります。 ::first-line 擬似要素で指定されたプロパティは ::first-letter 擬似要素に継承されていますが、 同じプロパティが ::first-letter 擬似要素に指定された場合は、そのプロパティは上書きされます。

UA は、::first-letter 擬似要素の架空開始タグが、子孫に最初の文字が含まれていたとしても、要素の最初の文字の直前にあるかのように振舞うべきだと CSS3仕様書には書かれています。

example

<div>
 <p> The first text.

この架空タグ列は次のようになります。

fictional tag

<div>
 <p>
  <div::first-letter>
   <p::first-letter>
    T 
   </p::first-letter>
  </div::first-letter>
    he first text.

table-cell や inline-block の最初の文字は、祖先要素の最初の文字にはなりません。

example

<div><p style="display: inline-block"> あいう <br> えお </p> かきくけこ </div> 

この場合 div は最初の文字を持たず、div の最初の文字は " あ " にはなりません。

要素がリスト項目 (display: list-item) である場合、::first-letter は、 リストマーカー（）の直後の最初の文字に適用されます。

p::first-letter { color: red; font-size: 32pt; }
span { display: list-item; }

display

UA は、リスト項目に list-style-position: inside が指定されている場合、 ::first-letter を適用しなくても良いとされています。

要素に ::before や ::after が指定されている場合、 ::first-letter はそれらも含めた最初の文字に適用されます。

example

p::before {content: "Note: "}
p::first-letter { color: red; font-size: 32pt; }

display

上記の HTML ソースは <p> 本文 </p> のみです。 ::before で指定されている Note: の文字が左に表示されています。 ::first-letter は この Note: の N にマッチしています。

UA は、イニシャルキャップ（最初の文字を大きく表示する）の正確な表示ができるように、 文字の形状をベースにした文字の幅、文字の高さ、行の高さに変更することができます。

次の CSS と HTML は、イニシャルキャップの表示例です。

CSS

p { line-height: 1.5; }
p::first-letter { font-size: 28pt; font-weight: normal; }
span { font-weight: bold; }

HTML

<p>
<span> ウーピー・ゴールドバーク </span><br>
の「天使にラブ・ソングを」の映画をご存知の方は多いと思います。 <br>
ギャングの愛人だった女性が修道院で巻き起こす珍騒動がとても面白いです。
</p>

display

::first-letter 擬似要素によって継承されている行の高さは 1.5 ですが、 最初の２つの行の間に不要な空間が生じないように、この例における UA は、最初の文字の高さを計算しています。

最初の文字の架空開始タグは <span> ～ </span> の内側にありますが、 最初の文字のフォントの太さ（font-weight）は、span で指定した bold ではなく ::first-letter で指定した normal になっています。

次は、 最初の２行にまたがったドロップキャップ（イニシャルキャップの一部）を作ります。

CSS

p { width:200px; font-size: 14pt; line-height: 1.2; }
p::first-letter { font-size: 200%; color: red; float: left; }
span { color: deeppink; }

HTML

<p><span> このように </span> 最初の文字は最初の約２行にわたって表示されます。</p>

display

架空タグ列は次のような感じです。

fictional tag

<p>
 <span>
  <p::first-letter>
   こ
  </p::first-letter>
  のように
 </span> 
 最初の文字は最初の約２行にわたって表示されます。
</p>

::first-letter 擬似要素の架空開始タグは、最初の文字に隣接しています。 一方、::first-line 擬似要素の架空開始タグは、ブロックレベル要素の開始タグの直後に挿入されます。

UA は、従来のドロップキャップを作るために、フォントサイズを調整し、 ベースラインを揃えることができます。フォーマットするときにも、グリフ（字形）のアウトラインを考慮に入れることができます。

※ E の斜体は仮の名前です。