HTMLだけで色を変える！5分でわかる文字や背景を変更する方法

HTMLだけで文字や背景の色を調整したい
色が反映されないのはなぜ？
とにかくすぐに色の変え方を知りたい

HTMLだけで色を変えられたら楽だなと思ったことはありませんか。

手軽に試したいときや、ちょっとした色の変更に非常に便利です。

しかし色の指定方法を理解せずに使うと、後々メンテナンスが困難になったり、思うように色が反映されない場合があります。

本記事では、HTMLでの色指定の基本から、色が反映されない原因と対処法まで解説します。

色指定の種類や便利なツールも紹介するので、最後まで読んでみてください。

1. HTMLで色を指定する方法
- 1.1. インライン（style属性）で色を指定する
- 1.2. 内部CSS（<style>タグ）で色を指定する
2. 色の指定方法の種類
3. HTMLの色指定の非推奨タグ
4. HTMLで色が反映されない5つの原因と対処法
5. HTMLよりCSSで色を管理すべき3つの理由
6. HTML/CSSの色指定に役立つ便利ツール5選
7. まとめ：HTMLの色変更は少し試したいときに使おう
8. 未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！

HTMLで色を指定する方法

HTMLで色を指定する主な方法は、インライン（style属性）と内部CSS（<style>タグ）の2つです。

それぞれの特徴と使い方を以下の表にまとめました。

	インライン (style属性)	内部CSS (<style>タグ)
記述場所	HTMLタグ内	HTMLファイルの<head>タグ内
適用範囲	指定した特定の要素のみ	セレクタで指定した複数の要素、またはページ全体
再利用性	✕	◯
保守性	△	△
おすすめの場面	ピンポイントの調整	ページ単位のスタイル統一

色指定の詳細について順番に解説します。

インライン（style属性）で色を指定する

インライン（style属性）は、HTMLタグの中に直接style属性を記述してCSSプロパティを指定します。

特定の要素だけにピンポイントでCSSを適用したいときに便利で、変更結果をすぐに確認できます。

基本的な書き方は以下の通りです。

<タグ名 style=”プロパティ1: 値1; プロパティ2: 値2;”>コンテンツ</タグ名>

たとえば、段落の文字色を赤にしたい場合は以下のように記述します。

コピー<p style="color: red">この文字は赤色になります。</p>

背景色を変更したい場合は、外部CSSに記述するときと同様にbackground-colorプロパティを使用します。

複数のスタイルを一度に指定したいときは、セミコロン（;）で区切って記述します。

文字色と背景色を同時に変える場合は、colorとbackground-colorをセットで指定します。

指定する順番に決まりはありませんが、見やすく整理して書いておくことで、後からの修正が楽になります。

内部CSS（<style>タグ）で色を指定する

内部CSS（<style>タグ）は、HTMLファイルの<head>タグ内に<style>タグを記述し、中にCSSをまとめて書きます。

同じスタイルを複数の要素に適用したい場合や、ページ全体のスタイルを管理したい場合に便利です。

基本的な書き方は以下の通りです。

たとえば、ページ内の全てのpタグの文字色を青色にする場合は、以下のように記述します。

コピー<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>内部CSSの例</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>この段落は内部CSSで青色になります</p>
<p>こちらの段落も青色です</p>
</body>
</html>

内部CSSは特定のHTMLファイルにのみ適用されるため、サイト全体で統一したスタイルを使用したい場合は、外部CSSファイルを使った方が管理しやすくなります。

また、内部CSSも外部CSSと同様にクラス名の指定が可能です。

色の指定方法の種類

HTMLやCSSで色を指定するときは、いくつかの方法があります。

以下に色指定の種類とメリット・デメリットをまとめました。

	書き方の例	特徴・概要	メリット	デメリット
色名	color: red;	定義された色の名前	直感的でわかりやすい	・色の種類が限られる・細かいニュアンスは出せない
16進数カラーコード	color: #FF0000;	光の三原色を16進数で表現	多くの色を表現可能	カラーコードから直接色を想像しにくい
RGB/RGBA値	color: rgb(255, 0, 0);	rgb（赤,緑,青）で0-255の数値指定	・多くの色を表現・透明度の指定も可能（RGBA）	16進数より記述が少し長くなる

用途や好みに応じて使い分けてください。

色名での指定

あらかじめ定義されているred、blue、green、black、whiteのように色の英名を直接指定する方法です。

覚えやすく直感的で分かりやすいですが、利用できる色の種類は限られています。

たとえば、文字をネイビーで背景をライトピンクにするときは以下のように記述します。

コピー<p style="color: navy">これはネイビー色の文字です。</p>
<div style="background-color: lightpink">この背景はライトピンクです。</div>

ほぼ全てのブラウザが標準対応しているため、互換性を気にせずに使用できます。

また英語名なのでイメージがつかみやすく、コーディングの速度アップにつながります。

16進数カラーコードでの指定

#RRGGBBまたは#RGBの省略形式で、赤・緑・青の光の三原色の強度を16進数で表現する方法です。

カラーコード指定は多くの色指定に対応でき、青色でもどのくらいの濃さなのか細かく表現できます。

コピー<h1 style="color: #336699">この見出しは深みのある青色です。</h1>
<p style="background-color: #0066cc;">この段落の背景はアリスブルーです。</p>

カラーコードからは直接色が想像できないデメリットはありますが、細かいニュアンスを表現できます。

16進数カラーコードの指定なら、デザイナー指定のコードをそのままコピーでき、グラデーションや細かな調整をする場面でも重宝します。

RGB・RGBA値での指定

rgb(r：赤の値, g：緑の値, b：青の値) の形式でそれぞれ0～255の数値を指定します。

rgba(r, g, b, α) なら透明度も同時に設定可能です。

最後のα値（0.0～1.0）を設定することで、半透明レイヤーやオーバーレイ効果も実装できます。

RGB・RGBA値で色指定する場合は、以下のように記述します。

コピー<p style="color: rgb(255, 99, 71)">トマト色の文字です。</p>
<div style="background-color: rgba(135, 206, 235, 0.3);">
半透明の青い背景です。
</div>

色味を変化させることで、背景画像やテキストとのコントラストも調整しやすくなります。

必要に応じてrgba()の数値を微調整してください。

HTMLの色指定の非推奨タグ

HTMLタグの属性で直接色を指定する方法がありましたが、現在ではその多くが非推奨となっています。

非推奨タグは以下の通りです。

非推奨のHTML属性/タグ例	代替となるCSSプロパティ例	備考
<font color=”red”>	p { color: red; }	<span> タグとCSSで部分的に色変更するのが一般的
<body bgcolor=”yellow”>	body { background-color: yellow; }	ページ全体の背景色
<body text=”blue”>	body { color: blue; }	ページ全体の基本文字色
<table bgcolor=”lightgray”>	table { background-color: lightgray; }	テーブルの背景色

HTMLは文書の構造、CSSは見た目を定義するという役割分担がおすすめされているため、直接指定は推奨されていません。

将来的に仕様から外れる可能性があるタグを使用せずにスタイルを管理するには、外部CSSを利用するのがもっとも一般的でおすすめです。

HTMLで色が反映されない5つの原因と対処法

色が反映されないよくある5つの原因は、以下の通りです。

CSSの優先順位による上書き
OS・ブラウザ設定による上書き
色のコントラスト不足による視認性の問題
HTMLやCSSの記述ミス
ブラウザキャッシュの影響

HTMLやCSSで色を指定したにもかかわらず、期待通りに表示されないことはよくあります。

それぞれの原因と対処法を見ていきましょう。

CSSの優先順位による上書き

CSSの優先順位によって反映されない場合があります。

CSSには、どのスタイルを最終的に適用するかを決める詳細度というルールがあります。

よくあるミスは、意図したスタイルがより優先度の高い別のスタイルによって上書きされてしまうケースです。

たとえば、クラスを指定して文字を赤色にしていても、!important宣言で青を指定した場合は青い文字が表示されます。

このような場合は、開発者ツールのElementsパネルで、どのスタイルが実際に適用されて、どの部分が打ち消されているかを確認しましょう。

打ち消し線が付いているスタイルがあれば、上書きしている原因を特定し、セレクタの詳細度を調整するか、記述順序を見直してください。

OS・ブラウザ設定による上書き

ユーザーのコンピュータ環境（OSやブラウザ）の設定が、Webページの表示スタイルに影響してしまう場合があります。

特にアクセシビリティ機能が有効になっていると、指定した色が強制的に変更されることがあります。

ユーザーがChromeの拡張機能「Dark Reader」を使用している場合を考えてみましょう。

鮮やかな青色で指定したボタンが、拡張機能によって「目の疲れを軽減するための落ち着いたトーン」に自動変換されて表示されることがあります。

これはコードのミスではなく、ユーザー環境依存の仕様として切り分けるのが適切です。

対策としては、まず拡張機能のアイコンから当該サイトだけを一時的に無効化し、ページをリロードして本来の青色に戻るかを確認します。

さらに、拡張機能をインストールしていない別のブラウザや別デバイスでも同じページを表示してみましょう。

これにより問題を切り分けて、ユーザー環境による表示が原因かどうかが判断できます。

色のコントラスト不足による視認性の問題

CSSで文字色と背景色を指定するとき、コントラストが不十分だと文字が読みづらく、視認性の問題が発生します。

たとえば、上図のように薄い黄色の背景に白い文字を配置すると、コントラスト不足で視認性が著しく低下します。

一方で、濃い青の背景に白い文字なら読みやすく、背景色と文字色の明度差を適切に設定することで、視認性の大幅な向上が可能です。

Webアクセシビリティの国際基準であるWCAGでは、通常テキストでコントラスト比4.5:1以上、大きなテキストで3:1以上を推奨しています。

コントラスト比は、ChromeやFirefoxの開発者ツールに搭載されているコントラスト確認機能で実際のページ上で手軽に検証が可能です。

また、コントラスト比測定ができるコントラストチェッカーツールもあります。

コントラストが不足している場合は、文字色を濃くしたり背景色を明るくするなど、色の差を調整してください。

コーダーは、デザイナーの指定をただ再現するだけでなく、コントラスト不足を発見した際には具体的な数値を示して色の調整をデザイナーに相談することが重要です。

問題点を共有しながらカラーコードを適切に修正することで、デザインの美しさを損なうことなく、Webサイトを構築できます。

HTMLやCSSの記述ミス

タグの閉じ忘れやスペルミス、CSSのセミコロン漏れなどの単純なミスもスタイルが適用されない原因の一つです。

わずかな間違いでも、コンピュータは意図通りに解釈してくれません。

ケアレスミスを防ぐには、Visual Studio CodeユーザーならHTMLのコードチェックする「HTML Hint」やスペルミスをすぐに教えてくれる「Code Spell Checker」などのプラグインを導入するのがおすすめです。

コードのミスを自動的に検出し、波線やエラーメッセージで表示されるため、作業中でもミスに気づきやすくなります。

リアルタイムで記述ミスを発見できることで、生産性の向上につながります。

ブラウザキャッシュの影響

Webブラウザは表示速度を向上させるため、一度アクセスしたページのデータをキャッシュとして保存し、CSSファイルを更新しても古いデータを使い続けることがあります。

たとえば見た目を変えるためにスタイルを修正したのに、画面上はまったく更新前のままに見えるのは、このキャッシュが原因です。

そんなときは、Windowsなら Ctrl + F5、Macなら ⌘ + Shift + R を押して「スーパーリロード」をしてみてください。

これはブラウザにキャッシュを無視して最新のファイルを取得させる操作です。

それでも反映されない場合は、ブラウザ設定からキャッシュをクリアしてください。

開発中はChromeやFirefoxの開発者ツールを開き、ネットワークタブで「Disable cache（キャッシュを無効化）」にチェックを入れておくと、常に最新のCSSで作業できて効率的です。

スーパーリロードや開発者ツールでDisable cacheにチェックを入れたりすると、変更箇所が正しく画面に反映されるようになります。

HTMLよりCSSで色を管理すべき3つの理由

HTMLよりもCSSで色を管理した方がいい3つの理由を紹介します。

保守性
サイトの表示速度
デザインの一貫性と拡張性

これらを意識するだけで、Webサイト制作がぐっと楽になります。

保守性

外部CSSファイルで一元管理することで、HTMLとは異なり一箇所の修正だけで全ページに変更を反映できます。

手戻り作業が大幅に削減され、Webサイト全体のデザイン変更も可能です。

変更履歴もスタイルファイルにまとめて記録できるため、いつどこを修正したかをすぐに確認できます。

デザイナーやほかの開発者との協業でも、共通のCSSを基準にできるため、認識の食い違いを防げます。

また、カラーパレットを変数として定義しておけば、テーマの切り替えや色調整も短時間で可能です。

これらにより、大規模なサイトでもWebサイト全体の保守性が大幅に高まります。

サイトの表示速度

外部CSSはキャッシュされやすく、HTMLファイルのサイズも抑えられるため、表示速度向上につながります。

HTML内にスタイルを埋め込むと、毎回同じCSSコードが読み込まれてページサイズが増大します。

外部CSSとして読み込むことで、ブラウザキャッシュが効きやすくなり、一度ダウンロードした後の再読み込みには負荷がかかりません。

HTML自体の容量が小さくなることで、ページをはじめて開いたときに画面が表示されるまでの時間が短縮されます。

さらに、通信データ量が減ると、スマホ回線や通信速度の遅い場所でもページが素早く読み込まれます。

ユーザーは待たされるストレスが少なくなり、離脱率の低下につながるため、検索エンジンからも「使いやすいサイト」と評価されるでしょう。

デザインの一貫性と拡張性

サイト全体で統一感のあるデザインを維持しやすく、新しい要素やページにもスタイルを適用しやすくなります。

CSSで色を一元管理すると、Webサイト全体で統一したトーンを保てるからです。

新たに作るページやパーツにも同じクラスを当てるだけで既存の配色ルールが適用できるため、後から加わる要素もすぐに実装できます。

たとえばブランドカラーを変更したいときも、CSSやカスタムプロパティを修正するだけで全体を自動的に更新可能です。

さらに、ボタンやカードといったUIコンポーネントをまとめておくと、同じ見た目や動きを複数の画面で簡単に再利用でき、開発や修正の手間を減らせます。

CSSで管理することでデザイン品質を維持しながら開発効率を高め、長期的な運用コストの削減が可能です。

HTML/CSSの色指定に役立つ便利ツール5選

ここでは、色指定に役立つ5つのツールを紹介します。

	特徴
ColorZilla	画面上の色を抽出（スポイト機能）、カラーコード取得、グラデーション生成ツール
色検索	色名・カラーコード・色み検索
Color Space	カラーコードを入力すると、カラーに合った配色を3〜6色で複数提案
Web Gradients	グラデーションサンプルのカラーツール
コントラストチェッカー	文字色と背景色のコントラスト比測定