ホームページのネタ帳

テキストの最初の1文字にインパクトを与える方法

2012年7月09日

英字新聞などでよく見かけるような、テキストの最初の1文字だけ大きく表示させる方法を紹介します。

■html

<p class="impact">テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります。</p>

■css

p.impact:first-letter {
  font-weight: bold;
  font-size: 200%;
}

実際はこんな感じになります。↓

テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります。

font-sizeの値を変更することで、最初の文字の大きさを変えることができます。


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp