WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

【CSS】段落の最初の1文字だけ大きく見せる方法

この記事は約1分45秒で読めます

アクセサリー ビーチ 青 女性 フリップフ ロップ 帽子 休日 レジャー 海 砂 サンダル
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

雑誌や新聞などでよく使われる
最初の1文字目だけサイズが大きかったり色を変えたりする手法がありますよね

段落の先頭文字を使って
読者の目を引くこの手法を「イニシャルキャップ」といいます。

読者にインパクトを与えることができるのでアイキャッチ効果があります。

また、イニシャルキャップの配置の仕方によって
「レイズドキャップ」、「ドロップキャップ」、「ハンギングキャップ」
などの種類があります。

先頭の文字を大きくすることで、
新しい段落の始まりを強調できます。

実際に使うと下のようなイメージになります。
参考用にスタイル指定しましたので、よかったらあなたのブログで使ってみてください。

font-size 500%はデカすぎると思うので、適宜変えてください。

レイズドキャップ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

スタイルシート(style.css)

HTML

ドロップキャップ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

スタイルシート(style.css)

HTML

ハンギングキャップ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

スタイルシート(style.css)

HTML

注意

「ハンギングキャップ」のCSSですが、
padding-bottomの値を固定値で入れてしまってます。。

上手いこと指定したかったのですが、ちょっといい方法が思いつきません。
何か良い案あったらコメントで教えていただけるとうれしいです!

関連記事

  1. 【WordPress】 HEAD、CSS、JavaScriptカスタムウィジェット
  2. 青白く光るフレア
  3. Cron 時計
  4. 記事タイトルで指定した文字を超えた場合「・・・」と表示する(改行タグ制限)
  5. 女性,ユニット,SALBIA,SARY,サルビア,悩み,苦悩,頭痛,表情
  6. STINGER5カスタマイズ 一覧ページを2列で表示する

コメントをお待ちしております

PR

カテゴリー