CSS | テキスト文字の色を変更する方法

2021-07-12CSS テキスト,CSS

このページではCSSでテキスト文字の色を変更する方法を紹介しています。

テキスト文字の色を変更する

See the Pen CSS | Display text diagonally by yochans (@yochans) on CodePen.

サンプルHTMLではテキスト用のpタグを作成、指定している3色のカラーネームと同名のclass名をHTMLのspanタグにを付与しています。

<p class="hotpink">SAMPLE</p>
<p class="dodgerblue">SAMPLE</p>
<p class="mediumseagreen">SAMPLE</p>

テキストの色を変更するにはcolorプロパティを利用します。

colorプロパティにはWEBカラーネーム（blueやred）、hexカラーコード（#で始まる16進数）、rgb（赤・緑・青の値から生成）、rgba（rgbに透過度を追加したもの）、またはHSLでの指定が可能です。

font-colorやtext-colorという記述では文字色を変更できないので注意して下さい。

セレクタの指定は「.hotpink」だけの指定で概ね問題ありませんが、pタグに元の色が指定されている場合に反映されなくなる可能性がありますので「p.hotpink」としています。

p.hotpink {
	color: hotpink;
}

p.dodgerblue {
	color: dodgerblue;
}

p.mediumseagreen {
	color: mediumseagreen;
}

単語単位、文字単位で色を変更する方法

pタグにCSSプロパティを指定した場合、pタグのdisplayプロパティの変更などは別として基本的に行単位での色指定になります。

ここでは単語単位、文字単位で色を変更する指定する場合のサンプルコードを紹介しています。

See the Pen CSS | Change text color by yochans (@yochans) on CodePen.

単語単位や一文字目だけなど文字単位で色を変更する場合は、pタグに指定するのではなくspanタグを使ってspanタグにcolorを指定します。

サンプルでは3色のカラーネームで指定しており、HTMLのspanタグに対してカラーネームと同名のclass名を付与しています。

<p>
	<span class="hotpink">S</span><span class="dodgerblue">AMPLE</span>
	<span class="hotpink">SAMPLE</span>
	<span class="mediumseagreen">SAMPLE</span>
</p>

各class名それぞれに、colorで目的の色を指定していきます。

span.hotpink {
	color: hotpink;
}

span.dodgerblue {
	color: dodgerblue;
}

span.mediumseagreen {
	color: mediumseagreen;
}