【CSS】タイトルやテキストの最初の一文字を大きく表示する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSでタイトルやテキストの最初の一文字を大きく表示する方法をご紹介しています。

一文字を大きく、と書いていますがが、正確にはタイトルやテキストの最初の一文字に任意のスタイルを適用する方法になります。適用するスタイルとしてフォントサイズを大きくするというのが多く使われているため、今回は最初の一文字のフォントサイズを大きくする方法を例としてご紹介していければと思います。

では、解説していきます。

最初の一文字にスタイルを適用する疑似要素「::first-letter」

「::first-letter」はブロック要素の最初の行にある一文字目のテキストにスタイルを適用することができる疑似要素になります。使用方法は簡単で、他の疑似要素と同様の方法で定義することができます。

p::first-letter {
  /* ここにスタイルを定義 */
}

いくつか注意点もありますが、基本的に疑似要素に指定した一文字目にスタイルがあたります。注意点につきましては下記のページで詳しく説明されていますので、併せてご参照いただければと思います。

::first-letter (:first-letter) - CSS: カスケーディングスタイルシート | MDN

では、実際に「::first-letter」を使用してテキストの最初の文字を大きくしてみましょう。

「::first-letter」でテキストの最初の一文字を大きくする

HTML

<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>

CSS

p::first-letter{
    font-size: 2.8em;
}

DEMO

See the Pen
First Letter1 | CSS by ryohei (@intotheprogram)
on CodePen.

デモを見ると、ちゃんと最初の一文字目のフォントサイズが大きくなっていますね。無事にスタイルが適用されています。

ただ、一文字目だけが大きくなってしまっているため、バランスが悪いですね……できれば後に続くテキストを回り込ませたいところです。

最初の文字を大きくして回り込ませる

回り込ませるというと、真っ先に思いつくのは「float」ですね。「flex」の登場でレイアウトで使用する機会は随分減りましたが、用途によってはまだまだ使用できます。

「::first-letter」にfloatを適用して回り込むようしましょう。

CSS

p::first-letter {
    float: left;
    font-size: 2.8em;
    margin: 0 5px 0 0;
    line-height: 1;
}

DEMO

See the Pen
First Letter2 | CSS by ryohei (@intotheprogram)
on CodePen.

期待通りの表示になりましたね！本記事では割愛しますが、floatを使用しているのでちゃんとクリアするようにしておきましょう。

最後に

いかがでしたでしょうか。

タイトルやテキストの最初の一文字だけを大きくしたり色を変えたりしているスタイルを採用しているサイトはよくあります。実装は簡単にできますし、見てすぐにわかる変化をつけることができますので、最初の一文字目にスタイルを付ける場合は積極的に使用していきたいですね！

以上、CSSでタイトルやテキストの最初の一文字を大きく表示する方法のご紹介でした！