【CSS】CSSで最初の1文字を装飾する方法
株式会社トミックス
お久しぶりです。
諸事情あって事務所の移転を繰り返している弊社です。
今回はCSSだけでできる、ウェブサイトの文字列をちょっとオシャレに見せるテクニックです。
ブログや情報発信サイトなどで、書き出しの1文字目が装飾されているのを見たことがあると思います。
ウェブサイトでありながら、雑誌や新聞などのように、文章にメリハリがついて見えませんか？
1文字だけ装飾するならspanタグで囲うなど、手段はいくらでもあるのですが、ここはCSSでスマートに実装してしまいましょう。
疑似要素「first-letter」を使う！
まずはテキストを内包しているブロック要素に、疑似要素「first-letter」を追加します。
テキストをpタグで囲っている場合は、以下のような書き方になります。
p:first-letter {
color: red; /* 1文字目の文字色を赤色に指定 */
}See the Pen CSS first-letter Example 00 by TOMIX WEBMASTER (@MediaTomix) on CodePen.
疑似要素を足すだけなので、至ってシンプルに実装できましたね。
以下に装飾例を少しだけ載せておきます。
See the Pen CSS first-letter Example 1 by TOMIX WEBMASTER (@MediaTomix) on CodePen.
See the Pen CSS first-letter Example 2 by TOMIX WEBMASTER (@MediaTomix) on CodePen.
See the Pen CSS first-letter Example 3 by TOMIX WEBMASTER (@MediaTomix) on CodePen.
最後に
プレーンテキストだけではデザインが単調になりがちですが、こういったアクセントを持たせることによって、ぐっとメリハリがつきます。
書き出しで目を引くことができれば、少し長い文章でも読んでもらうきっかけになることでしょう。
CSSをうまく使いこなして、「見てもらえる・読んでもらえる」サイト作りを目指しましょう！
株式会社トミックス