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

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

first-letter疑似要素

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

p:first-letter { font-size: 200%; }
※段落の先頭1文字の文字サイズを2倍(200%)にするスタイルです。

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

h1:first-letter { color: red; }

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

p:first-letter {
   font-size: 200%;
   color: white;
   background-color: #cc0000;
   padding: 1px;
}
※文字サイズを2倍(font-size: 200%;)にして、文字色を白色(color: white;)にして、背景色を赤色(background-color: #cc0000;)にしています。 「padding: 1px;」はなくても構いませんが、文字の周囲に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文字だけが大きな文字になっているデザインを実現する方法をご紹介致しました。 ぜひ、ご活用下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。