最初の文字にだけ適用するCSS3の疑似要素、first-letter

CSS3ってほんと便利な疑似要素が有りますね！さっきサイドバーを弄ってるときにタイトルの左側に付いてる青い●のコードをもっと簡素化したいなと思って最初の文字に適用する方法を探していたら、CSS3に有りました。first-letterというやつです。

最初の文字にだけ適用させる「:first-letter」

サイドバーのタイトル、最初はこんなコードでした。●をspanでかこってspanに青文字指定してました。

●目次

しかし、:first-letterを使えば以下のようなシンプルなhtmlでOK。

//html
●目次

//css
.title:first-letter{
	font-size: 10px;
	color: #49BDEE;
}

やーいいの覚えた。と思いましたが、ぶっちゃけ今思ったらhx系に不要な文字はSEO的にあんまり入れない方が良いかなと思ってきたので

結局●は画像にしよう

うんそうしよう。

[amazonjs asin="4798132195" locale="JP" title="CSS3逆引きデザインレシピ"]