E::first-letter

三角矢印 擬似要素について

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

::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

<p>サンドラ・ブロック主演の「しあわせの隠れ場所」という映画は、アメリカン・フットボール選手マイケル・オアーの実話を元にしたストーリーになっています。 血の繋がりを超えた家族愛に感動しますよ。是非一度ご覧になってみてください。</p>

display

サンドラ・ブロック主演の「しあわせの隠れ場所」という映画は、アメリカン・フットボール選手マイケル・オアーの実話を元にしたストーリーになっています。 血の繋がりを超えた家族愛に感動しますよ。是非一度ご覧になってみてください。

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

display

67 million dollars is a lot of money.

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

example

<p><br> First... 

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

上に戻る

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

example

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

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

display

'Test

※ 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)、2行目以降は水色(deepskyblue)となっています。 架空タグ列は以下のような感じになります。(" と笑い " 以降が2行目とする。)

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 ですが、 最初の2つの行の間に不要な空間が生じないように、この例における UA は、最初の文字の高さを計算しています。

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

上に戻る

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

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> 最初の文字は最初の約2行にわたって表示されます。</p>

display

このように最初の文字は最初の約2行にわたって表示されます。

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

fictional tag

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

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

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

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

上に戻る