HTML Color 完全ガイド｜文字色・背景色をCSSで正しく指定する方法

プログラミング

公開日: 2026/01/26

※この記事にはプロモーションを含みます

はじめに

HTML で色を指定しようとすると、検索結果には複数の書き方が表示されるため、初心者ほど「どれが正しい方法なのか？」と迷いやすい領域です。

特に、HTML の中で直接色を指定する方法と、現在推奨されている CSS での色指定が混在して紹介されているケースが多く、学習段階で混乱が生じます。

本記事では、HTML で色を指定する際に知っておくべき基本から、CSS による文字色・背景色の指定方法、アクセシビリティへの配慮、そして実務で役立つ色選びまで段階的に解説します。
初心者でも迷わず実装できるよう、よくあるエラーや非推奨の書き方についても丁寧に整理しています。

HTML で色を指定する基本知識

カラーコードの種類と仕組み

HTML や CSS における色指定の中心となるのがカラーコードです。

カラーコードには複数の記述方法があり、代表的なものとして「16 進数カラーコード（#FFFFFF など）」「RGB」「RGBA」「HSL」などが挙げられます。

記法	例	特徴	メリット
16 進数（HEX）	`#000000`、`#FFFFFF`	赤・緑・青を 00〜FF の範囲で指定	Web で最も一般的・短く書ける
RGB	`rgb(255, 0, 0)`	赤・緑・青を数値で指定	直感的に数値調整しやすい
RGBA	`rgba(255, 0, 0, 0.5)`	RGB に加えて透明度（0〜1）を指定	半透明表現が可能
HSL	`hsl(0, 100%, 50%)`	色相・彩度・明度で指定	視覚的に色調整しやすく、近年利用が増加

これらのカラー指定方法はすべて CSS で使用可能ですが、基本的にはどれを使っても問題ありません。

ただし実務では、ブランドガイドラインやデザインシステムに合わせて形式が統一されるケースが一般的です。

HTML で色が反映されない原因

HTML で色指定を行ったのに反映されない原因はいくつか存在します。初心者が特につまずきやすいのは次のようなケースです。

CSS の優先順位（Specificity）が影響している
セレクタが正しく指定されていない
外部 CSS ファイルの読み込みに失敗している
ブラウザキャッシュが古い CSS を保持している
HTML 属性※を使っているがブラウザの仕様によって正しく処理されていない

※<font color="">の color の部分を HTML 属性といいます。

こうした原因の多くは CSS の適用ルールを正しく理解すれば回避可能です。

本記事では CSS での色指定が中心となるため、以降のセクションでその正しい書き方を詳しく解説します。

CSS を使った文字色・背景色の指定方法

color プロパティの基本

CSS で文字色を指定する際に使用するのが color プロパティです。
もっとも基本的かつ確実な方法であり、すべてのブラウザでサポートされています。

p {
  color: #333333;
}

color は 16 進数・RGB・HSL のどれでも指定できますが、実務ではブランドカラーに合わせた 16 進数 がもっともよく使用されます。

また、body に色を指定すれば、ページ全体のデフォルト文字色を設定することも可能です。

background-color の使い方

背景色を指定する場合は background-color を使用します。

body {
  background-color: #f5f5f5;
}

背景色は文字色とのコントラストが重要なため、アクセシビリティ（WCAG 基準※）に配慮した色選びが必須です。
特に白背景に薄い灰色文字のような組み合わせは読みづらい場合があるため、実務では最低でも「4:5:1」の対比比率が推奨されています。

背景色と文字色はセットで設計する意識を持つことで、ユーザー体験が大きく改善します。

※WCAG（ウェブアクセシビリティ基準）：文字と背景の色の差が十分あるかなどを判断する国際的なガイドライン

HTML 初心者が混乱しやすいポイント

font タグが非推奨である理由

かつて HTML では <font color=""> のように色指定を行うケースが一般的でした。
しかし、現在この方法は 非推奨 となっています。
その理由は以下の通りです。

HTML は構造を記述する言語であり、デザインを記述すべきではない
保守性が低く、デザイン変更に弱い
CSS が登場し、より柔軟で再利用性の高いスタイリングが可能になった

そのため、色指定は必ず CSS で行うのが現代のベストプラクティスです。

色指定が反映されない典型例

色指定が反映されない理由には以下のような典型例があります。

CSSで色指定が反映されない理由

とくに初心者が気づきにくいのは、外部 CSS の読み込みパスが間違っているケースです。

<link rel="stylesheet" href="/css/style.css" />

href のパスに誤りがあると、CSS そのものが読み込まれず色指定も反映されません。

よくある疑問

カラーコードと RGB どちらを使うべき？

どちらでも問題ありませんが、実務ではカラーコード（#RRGGBB） が最も一般的です。

理由としては、デザインツールのほぼすべてが 16 進数カラーを採用していることや、ブランドカラーの指定が 16 進数で統一されているケースが多いためです。

一方、RGB や RGBA は透明度を扱う際に便利です。

ブラウザによる色の違いはあるのか？

基本的には主要ブラウザ間で大きな差はありません。

しかし、ディスプレイの色再現性や OS のカラーマネジメントの影響を受けるため、“完全に同じ色” にはならない可能性があります。

特にモバイル端末は機種ごとに色表現の癖があるため、実務では複数環境で確認することが推奨されます。

まとめ

HTML での色指定は古い書き方と新しい書き方が混在しやすいため、初心者が混乱するポイントでもあります。
しかし、現在の標準的な方法は CSS で統一して指定することです。

本記事では、カラーコードの基礎から文字色・背景色の設定方法、アクセシビリティを意識した配色、そして実務でも使える色指定パターンまで体系的に解説しました。

Web 制作において色はデザイン品質を大きく左右する要素であり、正しい理解が不可欠です。

さらに、Web 制作の学習や実務サポートをより効率的に進めたい方には、WEBMASTERS がおすすめです。 Web 制作に必要な基礎知識と実践が効率よく身につくため、学習効率が大幅に向上します。

この記事を
シェアする！