【初心者向け】HTMLで文字色や背景色を指定する方法を詳しく解説
- 公開日: 2017年8月24日
HTMLで文字や背景の色を指定する際、一般的にはCSSを利用します。しかし、簡単な色の指定はHTMLで簡単に可能です。
今回は、誰でもHTMLで簡単に文字色を指定する方法を詳しく解説していきます。
HTMLで色を指定するには
HTMLで色を指定するとは、指定したタグの要素内の文字色や背景色を変更することをいいます。ページ全体のテイストを変更したい場合や一部分だけ強調したい場合などには、文字色や背景色を変更することが多いです。
HTMLで文字色や背景色を指定する方法は、HTMLだけで指定する方法とCSSを用いて指定する方法の2通りがあります。この記事ではそれぞれの方法を見ていきましょう。
HTMLで色を指定する方法
背景色
背景色を指定するには、タグにbgcolor属性を指定する方法があります。このbgcolorのbgとはbackground(背景)を意味しています。bgcolor属性は、bodyタグ、tableタグ、trタグ、thタグ、tdタグに対して使用することが可能です。
<body bgcolor="色">背景色を指定する方法その1</body>
他にも、style属性にbackground-colorプロパティを指定する方法もあります。style属性はbgcolor属性とは違い、divタグやpタグなど多くのタグで使用可能となっています。
<div style="background-color: 色;">背景色を指定する方法その2</div>
ただし、上記の2方法はHTML内での指定だけで完結するため簡単で扱いやすくはありますが、HTML5では原則として非推奨とされています。これはHTML5では、HTMLで文書の内容を記述し、CSSで装飾に関する記述をすることが強く推奨されているからです。ですので、特別な理由がない限りは、次で紹介するCSSを用いる方法で背景色を指定するようにしましょう。
CSSではbackground-colorプロパティを用いて色を指定します。
<div>背景色を指定する方法その3</div>
div {
background-color: 色;
}
文字色
文字色を指定するためには、タグにcolor属性を指定します。color属性はbodyタグやfontタグにて使用することが可能です。
<font color="色">文字色を指定する方法その1</font>
また、color属性が指定できないタグに対しては、style属性のcolorプロパティを指定します。
<p style="color: 色;">文字色を指定する方法その2</p>
ただし、背景色と同じく、文字色もCSSで指定することが望ましいです。CSSではcolorプロパティを使用して文字色を指定します。
<p>文字色を指定する方法その3</p>
p {
color: 色;
}
実際のコード
それでは実際のコードの書き方を見ていきましょう！ここではHTML5の推奨に従って、CSSを使用して色を指定する方法を使用しています。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>サンプル<span>コード</span></div>
</body>
</html>
body {
background-color: blue;
}
div {
background-color: black;
color: yellow;
}
span {
color: red;
}
bodyの背景色をblue、divの背景色をblackに指定しました。また、divの文字色はyellowとなっていますが、その内側で囲われているspanの文字色はredで上書きされています。
まとめ
- HTMLで文字色や背景色を指定するためには、HTMLだけで指定する方法とCSSを用いて指定する方法があるが、HTML5以降はCSSを用いる方法が推奨されている。
- 背景色を指定する場合は、CSSでbackground-colorプロパティを指定する。
- 文字色を指定する場合は、CSSでcolorプロパティを指定する。
- この記事を書いた人
- CodeCampus編集部
