【解説】CSSでテキストの背景色を変更する方法

2024/04/17

この記事では、Webデザインにおいてテキストの背景色を変更する方法について解説します。

テキストの背景色を変えることができれば以下のようにテキストを強調することが可能です。

Webサイト上のテキストはCSSによって自分の好きな色に強調することができます。

また、少し手を加えることによってマーカーのような線で強調することもできます。

テキストの背景色変更

Webサイトにてテキストを入力する場合、pタグによって入力する場合が多いと思います。

今回は、pタグを使用したテキストから開始し、そのテキストの背景色を変更する方法を試してみます。

pタグを使用して、テキストを入力した場合、以下のように何も装飾されていないテキストが表示されます。

See the Pen test0 by Lio (@lionooil) on CodePen.

この何も装飾されていないテキストにHTMLとCSSを駆使して、背景色を付けてみます。

具体的には、CSSでbackground-colorによって色を指定するだけです。

pタグにCSS内に定義したクラス名を記述し、background-colorが適用されるようにします。

See the Pen test1 by Lio (@lionooil) on CodePen.

CSSでbackground-colorによって色を指定することで、テキストの背景色が変わりました。

しかし、水色の背景色が横いっぱいに広がってしまっています。

これはpタグがブロック要素であり、その幅が親要素の最大幅になるようにデフォルトで決められていることに起因しています。

テキストの背景のみに色を付ける場合は、対象のテキストをspanタグで指定します。

spanとはその名前の通り「範囲」という意味で、ただHTML上で範囲を指定するだけの基本的なタグの一つです。/

ですが、このspanタグで指定した要素外に背景色が横幅いっぱいになってしまうことを防ぎます。

See the Pen test2 by Lio (@lionooil) on CodePen.

spanタグでテキストを囲むことによって、テキストの背景色のみを変更することができました。

これは、spanタグはpタグと違いインライン要素であるため、spanタグで囲まれた要素の幅はspanタグ内のコンテンツによって自動的に変更されるという違いがあるからです。

spanタグも使いどころによっては、とても役に立つタグです。

See the Pen test3 by Lio (@lionooil) on CodePen.

ここまでは、HTMLやCSSを勉強すると、序盤で触れるようなコードを使用して比較的簡単に実現することができます。

ですが、少し手を加えることによって、以下に紹介するようなマーカーでアンダーラインを引いたようなデザインに変えることが可能です。

少し手を加えるといっても、難しい要素は何もなく、linear-gradient()というCSSの関数をbackground-colorに適用するだけです。

例えば、水色のマーカーのアンダーラインを表示したい場合は、以下のように値を設定することで、表現することが可能です。

See the Pen test4 by Lio (@lionooil) on CodePen.

このlinear-gradient()という関数は、もともと特定の範囲内のグラデーションを表現するための関数なのですが、これをあえてグラデーションを機能させずに流用することでマーカーでアンダーラインが引かれているように見せることができます。

今回は、linear-gradient()関数に以下のような引数を渡しています。

linear-gradient(開始色終了地点, 終了色開始地点)

具体的な値は以下の通りです。

今回は上部の透明部分の終了地点とマーカー部分の開始地点を上部70%に揃えているため、グラデーションが発生せずに、境界がはっきりとしたアンダーラインが引かれています。

逆に言うと、この開始位置と終了位置にギャップがある場合は、その間の色が滑らかに変化し、グラデーションとして表示されます。

以下は、実際に値を変更して、マーカーの上部にグラデーションを実装したものになります。

See the Pen test3-2 by Lio (@lionooil) on CodePen.

今回linear-gradient()関数の引数に指定した値では、透明色が終わる上部50%とマーカー色が始まる上部70%の間にギャップが生まれるため、このギャップの色が透明から水色に緩やかに変化するように表現されます。