【解説】CSSでテキストの背景色を変更する方法
この記事では、Webデザインにおいてテキストの背景色を変更する方法について解説します。
テキストの背景色を変えることができれば以下のようにテキストを強調することが可能です。
Webサイト上のテキストはCSSによって自分の好きな色に強調することができます。
また、少し手を加えることによってマーカーのような線で強調することもできます。
テキストの背景色変更
Webサイトにてテキストを入力する場合、pタグによって入力する場合が多いと思います。
今回は、pタグを使用したテキストから開始し、そのテキストの背景色を変更する方法を試してみます。
装飾されていないテキスト
pタグを使用して、テキストを入力した場合、以下のように何も装飾されていないテキストが表示されます。
See the Pen test0 by Lio (@lionooil) on CodePen.
この何も装飾されていないテキストにHTMLとCSSを駆使して、背景色を付けてみます。
pタグ内のテキスト背景色を変更
具体的には、CSSでbackground-colorによって色を指定するだけです。
pタグにCSS内に定義したクラス名を記述し、background-colorが適用されるようにします。
See the Pen test1 by Lio (@lionooil) on CodePen.
CSSでbackground-colorによって色を指定することで、テキストの背景色が変わりました。
しかし、水色の背景色が横いっぱいに広がってしまっています。
これはpタグがブロック要素であり、その幅が親要素の最大幅になるようにデフォルトで決められていることに起因しています。
spanタグによる範囲指定
テキストの背景のみに色を付ける場合は、対象のテキストを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(開始色 終了地点, 終了色 開始地点)
具体的な値は以下の通りです。
| linear-gradient()の引数 | ||
|---|---|---|
| 引数 | 値 | 意味 |
| 開始色 | transparent | 透明を意味します。 |
| 終了地点 | 70% | 上部70%が透明になります。 |
| 終了色 | #5CE1E6 | マーカーの色を指定します。 |
| 開始地点 | 70% | 下部70%以降がマーカー色になります。 |
今回は上部の透明部分の終了地点とマーカー部分の開始地点を上部70%に揃えているため、グラデーションが発生せずに、境界がはっきりとしたアンダーラインが引かれています。
逆に言うと、この開始位置と終了位置にギャップがある場合は、その間の色が滑らかに変化し、グラデーションとして表示されます。
グラデーションの適用したマーカーデザインの例
以下は、実際に値を変更して、マーカーの上部にグラデーションを実装したものになります。
See the Pen test3-2 by Lio (@lionooil) on CodePen.
今回linear-gradient()関数の引数に指定した値では、透明色が終わる上部50%とマーカー色が始まる上部70%の間にギャップが生まれるため、このギャップの色が透明から水色に緩やかに変化するように表現されます。
| linear-gradient()の引数 | ||
|---|---|---|
| 引数 | 値 | 意味 |
| 開始色 | transparent | 透明を意味します。 |
| 終了地点 | 50% | 上部50%が透明になります。 |
| 終了色 | #5CE1E6 | マーカーの色を指定します。 |
| 開始地点 | 70% | 上部70%より下がマーカー色になります。 |
実はこのlinear-gradient()関数は、他にも様々な引数を与えることができ、3色以上の色を指定したり、グラデーションの方向を自由に決めることができます。
使いこなせれば、Webデザインとしての強いツールとなります。
最後に
少し話がそれましたが、以上でWebデザインとして、テキストの背景色を変更する方法についての解説が終了になります。
まだまだ、HTMLとCSSだけでも実現できることが山ほどあるので、気になったものは都度紹介したいと思います。
最後までご覧いただきありがとうございました。
プロモーション
Webデザイナーとして活躍したい方へ。
専業主婦からWebデザイナー、転職後の年収UPの実現を手助けしてきたリベキャン。
無料カウンセリングに参加すると、Web制作ガイドブックなどの4大特典がもれなくプレゼントされます。
以下リンクより参加可能です。
＼ シェアする ／
