簡単！CSSでテキストの一文字目を大きくしてみよう

画像じゃなくCSSでテキストの一文字目を大きくしたいと思ったことありませんか？

CSSなら、あなたの思い通りに文字の大きさやテキストの色が実現可能です！

では早速、CSSで見出しやキャッチコピーの一文字目を大きくしたり色を付けて目立たせてみよう！

CSS ではじめの一文字を大きくするドロップキャップの方法

ここでは、「今売れています！」の一文字目「今」を大きくしてみます。

HTML

見出しの場合は下のように記述しましょう。ここでは例として、h3の見出しの一文字目を大きくします。

<h3 class="textbig">今売れています！</h3>

CSS

CSSで単純に一文字目を大きくしたいときは、上のHTMLとクラス名と同じセレクタを以下のように追加記述しましょう。

.textbig {
 font-size:26px;
 font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
 font-weight: 700;
}
.textbig:first-letter {
 font-size:50px;
 color:#ff0000;
}

first-letter の属性を使うことで先頭の一文字目が大きくできます。

【例】

以下は、上での記述をしたときの表示例です。

おわりに

CSSで一文字目のテキストを大きくする方法をご紹介しました。試してみてくださいね。