CSSで特定の文字だけ色を変える方法

文章の先頭文字だけ色を変える方法

まずは、先頭の1文字だけ色を変える方法を説明します。

これはCSSの::first-letterと呼ばれる疑似要素を使用することで色を変えることが出来ます。

コード例

HTMLファイルには下記の内容を記載してください。

<p class="el_txt">色を変更したいテキスト</p>

CSSファイルには下記のコードを記載してください。

.el_txt::first-letter {
  color: red; /*指定したい色*/
}

実装サンプル例

今回はサンプルとしてブロック要素とインライン要素の二種類を用意しました。

サンプルを見るとわかるかと思いますが、::first-letterはpタグやdivタグなどブロック要素にはスタイルが当たりますが、spanタグやaタグなどのインライン要素にはスタイルが当たりません。使用する際はこの点に注意してください。

See the Pen Untitled by Shito_ Web (@Shito_-Web) on CodePen.

spanタグを用いて特定の文字だけ色を変える方法

次にspanタグを用いて特定の文字だけ色を変える方法を説明します。

これは、文章内で色を変更したい部分をspanタグで囲み、そのspanタグに対してスタイルを当てることで色を変えることが出来ます。

色を変更したい部分が文脈の中で意味を持つ場合は、spanタグではなく、markタグやstrongタグなど文脈に適したタグを使用してください。判断が難しい場合はspanタグで構いません

コード例

HTMLファイルは下記のように記載してください。

<p>テキスト<span class="el_txt">変更したいテキスト</span>テキスト</p>

CSSファイルは下記のように記載してください。

.el_txt {
  color: red;/*指定したい色*/
}

実装サンプル例

サンプルはこちらです。

See the Pen Untitled by Shito_ Web (@Shito_-Web) on CodePen.

backgroundを用いて特定の文字だけ規則性を持って色を変える方法

最後にbackgroundプロパティを用いて特定の文字だけ色を変える方法を説明します。

これは文字色自体を透明にし、文字を背景色で切り抜くことで特定の配色を実現することが出来ます。

この方法は特定の規則性を持って色を変えたい場合に最も適しています。

コード例

HTMLファイルは下記のように記載してください。

<p class="el_txt">テキスト</p>

CSSファイルは下記のように記載してください。

.el_txt {
  width: fit-content; /* 横幅を文字量に合わせる */
  color: transparent; /* 文字色を透明にし背景色を採用する */
  background: repeating-linear-gradient(
    90deg,
    #000 0 1em, /* 1文字目の色 */
    red 1em 2em, /* 2文字目の色 */
    black 2em 3em, /* 3文字目の色 */
    black 3em 4em /* 4文字目の色 */
  );
  background-clip: text; /* 文字に合わせて背景色を切り抜く */
}

実装サンプル例

サンプルはこちらです。

See the Pen Untitled by Shito_ Web (@Shito_-Web) on CodePen.

コード解説をするとbackground プロパティに repeating-linear-gradient()を設定し、1文字ずつ背景色を指定しています。

1emは1文字分の長さを表すので0から1文字目までは色が黒になっており、1文字目から2文字目までは赤色になります。今回は4文字目までを黒、赤、黒、黒の順に指定しているので2番目の文字だけ赤色になります。

以降は、この背景色の順序を繰り返していくため、サンプルでは2番目と6番目の文字である「キ」が赤色になっています。

ここでのポイントはwidthプロパティにfit-contentを設定している点です。この指定がない場合、ブロック要素は横幅が100%になっているため、テキストを中央寄せした際に背景色がずれる可能性があります。