Daily Drop Cap Close Up / crankypressman room9(ルームナイン)にお越し頂きありがとうございます。 Qtaro(@Daisuke_9taro)です。 「ドロップキャップ」ご存知ですか? 文章なんかで最初の文字だけ大きくなっているやつです。(※下記画像参照) 今回はこのドロップキャップのCSS3「:first-letter」を用いた実装方法と注意事項のメモ書きになります。 早速以下よりどうぞ。 疑似要素:first-letterで要素の一文字目のスタイル指定 まず、スタイルを指定する元ネタのサンプルHTMLはこんな感じ。 <p>ドロップキャップとは。先頭文字が大きい見せ方のことを指します。見出しやテキストベースのコンテンツなんかで利用すると効果的な魅せ方ができますね。古いブラウザでは上手く機能しないので注意が必要です。</p> <p>こういった形で