段落の先頭1文字を別デザインに(2ページ目)

スタイルシートで段落の先頭1文字をデザインするには？

それでは、スタイルシートで段落の先頭1文字だけについてデザインする方法をご紹介致しましょう。

first-letter疑似要素

先頭1文字だけに対してスタイルを適用するには、「first-letter疑似要素」を使用します。 例えば、段落を表す p 要素の先頭1文字を大きくするには、次のように記述します。

p:first-letter { font-size: 200%; }

もちろん、段落以外の場所でも使えます。例えば、「見出し」（h1要素）の先頭1文字を赤色にするには、次のように記述します。

h1:first-letter { color: red; }

今回の記事で使用しているデザイン（先頭1文字を大きくして、背景色を赤色にして文字色を白色にするデザイン）は、次のように記述することで実現できます。

p:first-letter {
   font-size: 200%;
   color: white;
   background-color: #cc0000;
   padding: 1px;
}

適用可能なのは、ブロックレベル要素に対してのみです。 ですから、p要素、div要素、h1要素、div要素などに対しては使用できますが、a要素（リンク）、strong要素、span要素などのインライン要素に対しては使用できませんのでご注意下さい。

特定のクラスにだけ適用させることも可能です。 例えば、orangeクラスのp要素にのみ適用させたい場合は、次のように記述します。

スタイルシート部分：

<style type="text/css">
p.orange:first-letter {
   color: white;
   background-color: orange;
   font-size: 200%;
}
</style>

HTML部分：

<p class="orange">
   この段落の先頭は大きなオレンジ色の反転文字になります。
</p>

おわりに

今回は、書籍や雑誌などで見かける、段落の先頭1文字だけが大きな文字になっているデザインを実現する方法をご紹介致しました。 ぜひ、ご活用下さい。

【関連記事】

• スタイルシートだけで段組を作る
• ナビゲーションバーをCSSで装飾
• 行間を広げるには？ スタイルシートで微調整！
• スタイルシートで様々な線種を使った表を作る
• スタイルシートを使う3つの方法