擬似要素

擬似要素は、要素では特定できない文書内の一部分にスタイルを適用する時に使います。

擬似要素は、擬似要素名の前にコロンを記述します。 CSS3 から、擬似クラスと擬似要素の区別をつけるために、擬似要素はコロン2つ( :: )で記述するようになりました。 現在のスタイルシートとの互換性を保つため、CSS1 や CSS2 で導入された、コロン1つ( : )の記述 ( :first-line、:first-letter、:before、:after ) も認められています。

E::first-line

E 要素の最初の1行目に対してスタイルが適用されます。

::first-line 擬似要素は、ブロックボックスや inline-block、table-caption、table-cell などブロック的なコンテナにだけ適用されます。 適用できるプロパティは、font 関連、color 関連、background 関連、word-spacing、letter-spacing、text-decoration、text-transform、line-height となります。 (UA によっては、他のプロパティも使えるかもしれません。)

p::first-line { font-weight: bold; }
<p>ナタリー・ポートマン主演の「あなたのために」というアメリカ映画は、 彼氏に捨てられた身重の主人公が、新しい土地で新しい友人たちに助けられながら幸せを掴んでいくという 心温まるストーリになってます。是非一度ご覧になってみてください。</p>

ナタリー・ポートマン主演の「あなたのために」というアメリカ映画は、 彼氏に捨てられた身重の主人公が、新しい土地で新しい友人たちに助けられながら幸せを掴んでいくという 心温まるストーリになってます。是非一度ご覧になってみてください。

上に戻る

プロパティの継承と架空タグ列   [読み飛ばす]

上記の例が、架空タグ列で書き換えられたとしたらこういう感じです。(※ " ナタ~土地で新し "までが最初の行として)

<p><p::first-line> ナタリー・ポートマン主演の「あなたのために」というアメリカ映画は、 彼氏に捨てられた身重の主人公が、新しい土地で新し </p::first-line> い友人たちに助けられながら幸せを掴んでいくという 心温まるストーリになってます。是非一度ご覧になってみてください。 </p>

また、上記の例に span 要素で何か指定したとします。その場合、::first-line 擬似要素が span 要素を分割し、span 要素は一旦閉じられ、直後にまた開始されるという風に考えられます 。架空タグ列で書き換えられたとしたら以下のような感じになります。

<p><p::first-line><span class=""> ナタリー・ポートマン主演の「あなたのために」というアメリカ映画は、 彼氏に捨てられた身重の主人公が、新しい土地で新し </span></p::first-line><span class="""> い友人たちに助けられながら幸せを掴んでいくという 心温まるストーリになってます。是非一度ご覧になってみてください。 </span></p>

要素の最初の行は、ブロックレベルの子孫 (通常フローから外れてないもの) に発生する可能性もあります。

<div><p> おはようございます。 </p></div>

上記の例では、div の最初の行は、p の最初の行となります。 ( p 、div 共にブロックレベルとする。)

上に戻る

table-cell、inline-block が指定されている最初の行は、祖先要素の最初の行になることはありません。

<div><p style="display: inline-block"> あああ <br> いいい </p> ううう </div>

上記の例では、div の最初の行は " あああ " ではありません。

最初の行に何もない場合もあります。

<p><br> First…

上記の例では、p の最初の行に文字が含まれていません。 ( br は HTML4 のデフォルトスタイルを想定)

上に戻る

UA は、架空の開始タグが、最も内側にあるブロックレベル要素中にネスト(入れ子)されているとして振舞うべきと CSS3仕様書には書かれています。

<div>
 <p>
  最初の段落
 </p>
 <p>
  二つ目の段落
 </p>
</div>

このときの架空タグ列は以下のような感じになります。

<div>
 <p>
  <div::first-line>
   <p::first-line>
    最初の段落
   </p::first-line>
  </div::first-line>
 </p>
 <p>
  <p::first-line>
   二つ目の段落
  </p::first-line>
 </p>
</div>

最初の行にある子要素の一部は、::first-line 擬似要素に適用可能なプロパティを ::first-line 擬似要素から継承します。 その他のプロパティは、通常の親要素から継承されます。

※ UA(User Agent / ユーザーエージェント)とは、Webサイトへアクセスする際に使用されるプログラムのこと。(ブラウザ)

上に戻る

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 は他のプロパティも適用できます。)

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

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

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

67 million dollars is a lot of money.

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

<p><br> First...

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

上に戻る

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

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

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

'Test

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

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

上に戻る

プロパティの継承と架空タグ列   [読み飛ばす]

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

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

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

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

<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仕様書には書かれています。

<div>
 <p> The first text.

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

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

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

<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; }

リスト項目リスト項目リスト項目

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

上に戻る

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

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

本文

上記の 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>

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

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

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

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

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

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

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

上に戻る

E::before

E 要素の前に育成された内容に対してスタイルが適用されます。

h3 { counter-increment: chapno; }
h3::before { content: counter(chapno, upper-roman) ". "; }
<h3>見出し</h3>
 <p>文章文章文章文章文章文章</p>
<h3>見出し</h3>
 <p>文章文章文章文章文章文章</p>
<h3>見出し</h3>
 <p>文章文章文章文章文章文章</p>

見出し

文章文章文章文章文章文章

見出し

文章文章文章文章文章文章

見出し

文章文章文章文章文章文章

上に戻る

::before::after で生成された内容を持つ要素に ::first-letter 擬似要素 と ::first-line 擬似要素が適用されると、 それらは生成された内容を含む要素の最初の文字または最初の行に適用されることになります。

p::before { content: "★"; }
p::first-letter { color: deeppink; }
<p> 注意事項 </p>

注意事項

" 注意事項 " の前に " ★ " が表示され、その色が ::first-letter で指定した deeppink になりました。

上に戻る

E::after

E 要素の後に育成された内容に対してスタイルが適用されます。

p::after {
           content: "Σ( ̄ロ ̄|||)ガーン!!";
           color: red;
}
<p> 財布忘れた!! </p>

財布忘れた!!

顔文字を入れると面白いですねぇ。笑。

上に戻る