CSSで1文字目のスタイルを変える方法

CSSを使用して、テキストの1文字目のデザインを変更する方法の備忘録です。
1文字目以外に、1行目や、一部の文字の色を変える方法をまとめました。

1文字目のデザインを変更する

テキストの1文字目だけスタイルを変更する場合、擬似要素「::first-letter」を使用します。

SAMPLE TEXT

<p class="sample">SAMPLE TEXT</p>

.sample::first-letter {
  color: #32c3ac;
  font-size: 1.8rem;
}

該当するクラスに「::first-letter」を指定して、1文字目の色と大きさを変更しています。

「::first-letter」は、リストを表示するliタグにも使用できます。

<ul>
<li class="sample">SAMPLE TEXT</li>
<li class="sample">SAMPLE TEXT</li>
<li class="sample">SAMPLE TEXT</li>
</ul>

li.sample::first-letter {
  color: #32c3ac;
  font-size: 1.8rem;
}

その他、<div>、<dl>、<h1>、<ol>、<pre>、<table>など、ブロックレベル要素であれば同様に使用可能です。

<a>、<code>、<span>などのインライン要素は、そのままでは「::first-letter」を適用することができません。
そのため、displayプロパティを使用してブロックレベルに変更する必要があります。

SAMPLE TEXT

<p><span class="sample">SAMPLE TEXT</span></p>

span.sample {
  display: inline-block;
}
span.sample::first-letter {
  color: #32c3ac;
  font-size: 1.8rem;
}

spanタグに「display: inline-block;」を指定することで、「::first-letter」を適用することができました。

テキストの1行目だけスタイルを変更する場合は、1文字目とは異なる擬似要素「::first-line」を使用します。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

<p class="sample">あのイーハトーヴォのすきとおった風 …</p>

.sample::first-line {
  color: #32c3ac;
}

「::first-line」も「::first-letter」と同様に、インライン要素に使用する場合は「display: inline-block;」を指定することで適用できるようになります。

テキストの1文字目ではなく、一部の文字のデザインを変更する場合は、spanタグを使用します。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

<p>あのイーハトーヴォのすきとおった風、<span class="sample">夏でも底に冷たさをもつ青いそら</span>、…</p>

span.sample {
  color: #32c3ac;
}

擬似要素ではなく、<span>で囲ったテキストの色を変更しています。