文頭、最初の一文字の色を変えたり、大きくしたりといった手法のデザインは、よく見られると思います。
今回は、こういった表現をcssのみで実現できるのか？実現するにはどうすればいいかのか？というお話です。
結論から言うと、「first-letter」という疑似要素を使うことでそれは実現可能です。
それでは早速、「first-letter」の使いかたをご紹介します。
疑似要素「first-letter」を使って一文字目を装飾する方法
first-letterの使い方はとても簡単です。
一文字目に装飾を加えたいブロック要素に「:first-letter」を付けてスタイルを記述するだけです
それでは書き方をみてみましょう。
|
1 2 3 |
p:first-letter{ /*適用したいCSSのスタイルを記述*/ } |
これは<p>の要素に「first-letter」で一文字目の装飾を適用させる場合の例です。
もちろん「ｐ」以外の要素でも先頭に文字があるブロック要素なら適用させることができます。
ただし、インライン要素には適用されないのでご注意ください！
|
1 2 3 4 5 |
p:first-letter{ font-size:3em; font-weight:bold; color:#e95295; } |
first-letterを使って一文字目を装飾したサンプルです
こんな時は「first-letter」を使えない？
先ほど、インライン要素に対しては「first-letter」を使えないと書きましたが、次の場合も「first-letter」が使えない、あるいは意図とした反応が返ってこないことがあるので注意が必要です。
１．:beforeを使用している場合
「first-letter」を設置した要素に疑似要素「before」が適用されている場合、content内に設定された文字の最初の一文字が、「first-letter」の最初の一文字として認識されます。もし、
content内を空白にしている場合は、該当文字がないと認識され、どの文字にも装飾が付きません。
２．「 などの特殊な文字を文頭で使っている場合
「」、“”、などのカッコで始まる文字が先頭の場合は、記号と最初の一文字までがセットで一文字と認識されます。
また、カッコ以外の特殊な文字、★、￥、などはブラウザーによって一文字と認識される場合と、まったく無視される場合に分かれます。
どういった特殊文字がどんな反応するかについては、個々に確認するのが確実です。＜、＞といったカッコに含まれそうな記号でも、カッコとして認識されない文字も存在するので注意が必要です。
３．最初の一文字が空白の場合
最初の一文字が空白の場合は、ブラウザーによってその文字が最初の一文字と認識される場合と、空白の次の文字までを最初の一文字と認識される場合に分かれるようです。いずれにしても、あまりいい反応は期待できないので、文頭には空白を配置しないようにしましょう。
以上のように、「first-letter」は使い方によっては、ブラウザー間での違いが生じたり、期待した結果が反映されなかったりするので注意が必要です。
もし、これらの問題が解決できない場合は装飾を適用したい文字をで囲ってcssを適用させるのが一番の方法になるかもしれません。
まとめ
「first-letter」は注意点もありますが、ポイントさえ押さえれば、使い勝手のいい疑似要素ですので、ぜひご活用ください。
