:first-letterとは疑似要素の1つで、「要素の最初の1文字」にのみスタイルを適用することができます。
例えば、以下のような文書があるとします。
<p>さきちん絵はがきで配布しているデータは1181×1748pxサイズです。<br>cmで表示すると、10×14.8cmとなり、ハガキと同じサイズになります。<br>はじめからハガキサイズでデータを配布しているので、リサイズや調整をする必要がなく、そのまま印刷することができます。</p>
:first-letterを使えば、最初の1文字、つまり「さ」の文字にだけスタイルを適用することができます。
具体的な使用例
例として、さきほどの文書に:first-letterを使ってスタイルを適用してみます。
[CSSの記述例]color:#F00; ← 赤色
font-size:30px; ← 文字サイズを30px
}
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>:first-letterの利用</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p>さきちん絵はがきで配布しているデータは1181×1748pxサイズです。<br>cmで表示すると、10×14.8cmとなり、ハガキと同じサイズになります。<br>はじめからハガキサイズでデータを配布しているので、リサイズや調整をする必要がなく、そのまま印刷することができます。</p>
</body>
</html>
これをブラウザで確認すると、以下のように表示されます。
このように:first-letterを使えば、「最初の1文字」にのみスタイルを適用させることができます。
覚えておきたいポイント
要素の一文字目に適用される
:first-letterを使えば、最初の1文字だけ大きくしたり、色を変えたりといった表現が可能です。
よく新聞や雑誌などで最初の1文字が大きく表示されていたりしますが、簡単にあのような表現が可能となります。
