見出しなどでよく見られる1文字目だけ文字色を変更するデザイン。
よく採用されるデザインなのでコーディングする機会もきっと多いと思います。
この記事ではHTMLとCSSで1文字目だけ文字色を変更する方法をご紹介したいと思います。

最初の1文字目の色を変える方法

HTMLとCSSで1文字目だけ文字色を変更する方法はいくつかの方法があります。

1文字目をタグで囲う

1文字目だけ色を変えたい場合、1文字目だけタグで囲うことで色を変えることが出来ます。

<p><span>最</span>初の1文字目の色を変える方法と:first-letterが効かない理由は？</p>

p span {
    color: #dc5a45;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

1文字目だけ色が変わりましたね。
文字色に限らず、文字サイズを変えたり太さを変えたり色んなことが出来るようになります。

疑似セレクタの:first-letterを使う

CSSの疑似セレクタ:first-letterを使うことで1文字目だけ色を変えることが出来ます。

:first-letterは最初の一文字目だけを指定することが出来る疑似セレクタです。

<p>最初の1文字目の色を変える方法と:first-letterが効かない理由は？</p>

p:first-letter {
    color: #dc5a45;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

1文字目だけ色が変わりましたね。
:first-letterを使う場合も文字色に限らず、文字サイズを変えたり太さを変えたり色んなことが出来るようになります。

:first-letterが効かない理由は？

:first-letterは1文字目を指定することが出来る疑似セレクタですが、時々効かない時があります。

それは、疑似要素で::beforeを生成している場合です。

アイコンを表示したり活用場面が何かと多い疑似要素ですが、::beforeを生成することでテキストの前に要素が出来てしまうため、結果的に1文字目なのに1文字目として認識されなくなってしまいます。

具体的には以下のようなパターンです。

<p>最初の1文字目の色を変える方法と:first-letterが効かない理由は？</p>

p:first-letter {
    color: #dc5a45;
}
p::before{
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    border-radius: 50%;
    background: #dc5a45;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

p:first-letter {
    color: #dc5a45;
}

この指定が反映されませんね。

疑似要素が1文字目として扱われてしまいます。
そのため疑似要素でテキストを表示する場合、疑似要素に指定したテキストの1文字目の色が変わります。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

:first-letterを使う場合は疑似要素の存在に注意が必要ですね。

まとめ

いかがでしたか？
1文字目だけ色を変える方法はいくつかの方法が存在しています。
タグで囲う方法はベタ打ちのHTMLの場合は使うことが出来ますが、CMSのエディタ内のテキストには使うことが出来ません。
そのような場合は、疑似セレクタの:first-letterを使うことになりますが、:first-letterの場合は効かないことがあるので注意が必要ですね。
それさえ気を付けていれば難しいことは無いので積極的に取り入れていきたいですね。