こんにちは、オフィス狛 デザイン部のSatoです。
先日、ドロップキャップをウェブサイトで表現する必要があったのですが調べるまで正しいやり方がわからなかったのでメモしたいと思います。
（テキストの1文字目のみを大きく表示する表現のことをドロップキャップって言うんですね。実は知らなかったです。）
最初大きくしたい1文字目の部分を<span>で囲んでclassで…と思ったのですが、実は「:first-letter」という擬似要素で簡単に実現できます。
いちいち<span>で囲まなくてもいいんです。
この擬似要素はブロックレベル要素の最初の文字にのみスタイルが適用されるので、ドロップキャップを実現できるのですね。
「p:first-letter」にfloat設定しp要素でfloat解除するといい感じになりました。
CSS
0 件のコメント:
コメントを投稿