0

先頭の一文字だけにスタイルを適用させたいときの「first-letter」

先頭の一文字だけにスタイルを適用させたいときの「first-letter」

新聞や雑誌などの印刷物でよく見かける手法ですが、文章の先頭の文字だけ拡大表示や、文字色を変えるなどして視線の誘導などに有効だったり、文章にリズムが生まれたりするというものがあります。

実際にどういったものかというのをデモで確認してみてください。

 

DEMO

 

 

先頭の文字だけに特定のスタイルを適用したい場合は「:first-letter」擬似要素を使います。

HTMLを記述

 

CSSを記述

p要素の文章中の先頭文字にテキストを適用する場合は、「p:first-letter」にて指定をします。

 

※注意点

:first-letter擬似要素はブロックレベル要素にのみ適用することができ、指定できるプロパティはfont関連である「text-decoration」「text-transform」「letter-spacing」「word-spacing」「line-height」「float」「vertical-align」など指定できるプロパティに限りがありますので注意してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 先頭の一文字だけにスタイルを適用させたいときの「first-letter」