crankypressmanroom9(ルームナイン)にお越し頂きありがとうございます。Qtaro(@Daisuke_9taro)です。「ドロップキャップ」ご存知ですか?文章なんかで最初の文字だけ大きくなっているやつです。(※下記画像参照)今回はこのドロップキャップのCSS3「:first-letter」を用いた実装方法と注意事項のメモ書きになります。疑似要素:first-letterで要素の一文字目のスタイル指定まず、スタイルを指定する元ネタのサンプルHTMLはこんな感じ。<p>ドロップキャップとは。先頭文字が大きい見せ方のことを指します。見出しやテキストベースのコンテンツなんかで利用すると効果的な魅せ方ができますね。古いブラウザでは上手く機能しないので注意が必要です。</p><p>こういった形で段落ごとに見出しとして使うと、余計な色をいれなくても印象的な表現で、ユーザにも文章の区切りを印象づけしやすくなりますね</p>これがドロップキャップ適用前で、これが適用後テキストベースのコンテンツだと”グッ”とに印象的になりますね♪ポイント:「float」で文字の頭の高さを揃える上記のようにするポイントは「float」で「first-letter」文字要素を落として、後続の文字列と頭の高さを揃えてあげること。(後はmarginで微調整します)スタイルの指定は下記の感じ。left;}注意:外部スタイルシートでのみ有効!!普通に使う分には特に気にしなくて良いと思うのですが、「:first-letter」は外部スタイルシートに記述しないと、効果がありません。style=””>と言った記述では、「:first-letter」は機能しませんのでご注意ください。(デモページ用だからスタイルの記述増やさないように。疑似要素:first-letterは一部ブラウザ(IEなんか)では非対応なので「どのブラウザから見てもドロップキャップさせたい!!」という場合は先頭文字のみ<span>や<b>で区切るなどしてスタイル指定するほうが無難ですね。今回の記事は以上です。