トップページの中の セレクタの中の :first-letter疑似要素 (E:first-letter)

:first-letter疑似要素 (E:first-letter)

  • 最終更新:2009年7月 7日 13:18

CSS1で定義された:first-letter疑似要素は、指定した要素の一文字目のテキストに適用するセレクタです。
雑誌などの紙媒体でよく見かける、イニシャルキャップやドロップキャップとして用いられます。むしろ、ソレ専用に作られたプロパティといっても過言ではないかもしれません。

この:first-letter疑似要素は、ちょこちょこと細かい仕様が決められており、まず適用できるのは、ブロックレベル要素、list-item、table-cell、table-caption、およびインラインブロック要素となっています。
これはあくまでも現段階で適用される要素のため、今後のCSSのバージョンによってはより多くの要素に適用される可能性も有ります。

次に、floatプロパティの値がnoneの場合は、インライン要素と同じような適用のされ方をします。それ以外の値の場合は、floatさせた状態と同じになります。
また、一文字目に適用とはいっても、引用などで使う「"」などの約物が有る場合は、約物と最初の一文字の二文字(以上の場合も)に適用されます。この辺りは各言語によって違ったりするみたいです。
他にテキストの前にimg要素やtable要素などが有る場合、適用されなかったりします。

後、:first-letter疑似要素は適用されるプロパティが決まっており、それらのプロパティは、font関連、color、background関連、text-decoration、vertical-align(floatがnoneの時のみ)、text-transform、line-height、margin関連、padding関連、border関連、float、text-shadow、clearとなっています。
尚、適用されるプロパティは決まっていますが、:first-line疑似要素と同様にUA(ブラウザなど)によって他のプロパティが適用できるかもしれません。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

:first-letter疑似要素のサンプル

p.pick:first-letter {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  color: #633;
  font-size: 5em;
  font-weight: bold;
  line-height: 1;
}
<p class="pick">
老夫婦の息子は、、、(略)
</p>

最初の文字だけ文字を大きくして、色を変えたり色々しています。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

老夫婦の息子は、現在42歳。
田舎でたくましく生活している両親を見て育ったがゆえに、この息子もそれ相応の能力を持っている。その能力とは、母親から受け継いだ圧倒的なカッコ良さとスタイルだ。イケメンやハンサム等と呼ばれている人たちでさえ、ただの引き立て役にしか見えない程だった。そんな息子だが、息子には息子なりの悩みが有った、それは・・・続く!

それっぽい感じで「老」にスタイルが当たっているのが確認出来るかと思います。
にしてもこの文書はなんだ(笑

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ