【HTML・CSS】テキストの文字の色を変更する。

59

Views

HTMLのテキストの文字の色を変更する方法として、CSSのcolorプロパティを指定することで文字の色を変えられます。

　

この記事では初心者向けに

　

  • CSSでテキストの文字の色を変更する方法
  • 色の指定をHEX値で指定する方法
  • 色の指定をRGB値で指定する方法

　

について解説をしていきます。

HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！

colorでテキストの色を変更する

テキストの文字の色を変更したいときは、CSSでcolorを用いて、任意のカラーコードを指定することで変更出来ます。

以下は、「pタグのテキストの文字色を黄色にする」例です。

HTML

<p>このテキストの色を黄色にしたい</p>

CSS

p{
 color:yellow;
}

colorでテキストの色をHEX値で指定する。

テキストの文字の色を変更する際に、カラーコードではなく、HEX値で指定することも可能です。

以下は、「pタグのテキストの文字色をHEX値を用いて黄色にする」例です。

HTML

<p>このテキストの色を黄色にしたい</p>

CSS

p{
 color:#ffff00;
}

colorでテキストの色をRGB値で指定する。

テキストの文字の色を変更する際に、RGB値で指定することも可能です。

以下は、「pタグのテキストの文字色をRGB値を用いて黄色にする」例です。

HTML

<p>このテキストの色を黄色にしたい</p>

CSS

p{
 color:rgb(255,255,0);
}

HEX値やRGB値は外部サイト「https://www.colordic.org/」などを参照することで確認することが出来ます。

　

以上となります。