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

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

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

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

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

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

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

HTML



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

h2の場合はh3をh2に変更しましょう。

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

CSS

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


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

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

【例】

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

今売れています!

おわりに

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

スポンサーリンク
同じカテゴリーのコンテンツ一覧