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

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

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

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

HTMLを記述

<p>ボストンの夜空にレッドソックスの上原浩治投手（39）が人差し指を突き上げて、
歓喜の輪に飲み込まれた昨年のワールドシリーズ最終第6戦から、奇しくもちょうど1年が経過したこの日。
球団は今季限りで契約が満了していた守護神との2年契約締結を発表した。</p>
<p>地元紙などによると、2年総額1800万ドル（約19億6000万円）。
上原との残留交渉では、ワールドシリーズ終了から5日以内に単数年俸約1530万ドル（16億8000万円）のクオリファイング・オファーを提示することもできたが、
上原が今季シーズン終盤に極度の不振に陥ったこともあり、地元メディアでは、
ブルペン投手としては引退したマリアノ・リベラ（元ヤンキース）を越える歴代トップの高額年俸は現実的ではないと報じられていた。</p>

<p>ボストンの夜空にレッドソックスの上原浩治投手（39）が人差し指を突き上げて、

歓喜の輪に飲み込まれた昨年のワールドシリーズ最終第6戦から、奇しくもちょうど1年が経過したこの日。

球団は今季限りで契約が満了していた守護神との2年契約締結を発表した。</p>

<p>地元紙などによると、2年総額1800万ドル（約19億6000万円）。

上原との残留交渉では、ワールドシリーズ終了から5日以内に単数年俸約1530万ドル（16億8000万円）のクオリファイング・オファーを提示することもできたが、

上原が今季シーズン終盤に極度の不振に陥ったこともあり、地元メディアでは、

ブルペン投手としては引退したマリアノ・リベラ（元ヤンキース）を越える歴代トップの高額年俸は現実的ではないと報じられていた。</p>

CSSを記述

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

p:first-letter {
	color:red;
	font-weight:bold;
	font-size:22px;
	padding:3px;
}

p:first-letter {

color:red;

font-weight:bold;

font-size:22px;

padding:3px;

}

※注意点

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