HTMLで文字色を変えるタグは今も使えますか？

タグはHTML5以降では非推奨です。デザインと構造が混在して保守性が下がり、複数箇所への適用が非効率で、互換性の問題もあります。現在はタグではなく、CSSのcolorプロパティでスタイルを管理することが推奨されています。

HTMLとCSSで文字色を変える方法｜初心者向け完全ガイド

2024年9月11日

この記事の結論

HTMLで文字色を変えるには、CSSのcolorプロパティを使うのが正解です。色を変えたい文字を<span>などで囲み、colorで色を指定します。かつての<font color>タグはHTML5で廃止（非推奨）になったため、これから書くコードでは必ずCSSのcolorで指定しましょう。

<!-- 段落全体の色を変える（style属性） -->
<p style="color: #d16176;">この文字はピンク色</p>

<!-- 一部の文字だけ色を変える -->
これは<span style="color: red;">赤い文字</span>です。

/* CSSファイルでまとめて指定するのが推奨 */
.text { color: #d16176; }

生徒

ペン博士！テキストの色を変えたいのですが、よくわかりません。

ペン博士

任せるのじゃ。今回は、HTMLタグやCSSを使って文字の色を指定する方法を解説するからよーく聞くんじゃぞ。

生徒

はい！お願いします！

Web制作を学び始めると、HTMLやCSSを使ったスタイル設定で最初に壁にぶつかることが多いです。特に、文字の色を自由に変える方法は基本的なスキルでありながら、正確に理解することが難しいと感じるかもしれません。

本記事では、HTMLタグやCSSを使って文字の色を指定する具体的な方法を、初心者でもわかりやすく解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

菅井さん
将来的への不安と子育てという背景から「副業」に挑戦しようと決意。独学からプログラミングの学習を開始していたが、WithCodeに出会い体験コースを受講。約4ヶ月の学習に取り組み、当初の目標であった卒業テスト合格を実現した。WithCode Platinumにて3件の案件を担当し、現在は副業だけでなく本格的に「フリーランス」として在宅で活躍していきたいと考えるようになる。

詳しくはこちらの記事をご覧ください。

HTMLのcolorタグで文字色を指定する3つの方法

fontタグを使う

HTMLで文字の色を指定する際に、古くから使われていた方法の一つに<font>タグがあります。このタグは、HTMLの初期から利用されており、簡単に文字の色やフォントスタイルを変更できるため、初心者にとっては分かりやすい手法です。

たとえば、<font>タグを使って赤色の文字を表示したい場合、次のように記述します。

<font color="red">この文字は赤色です</font>

<font>タグのcolor属性を使って、色を指定でき、指定したい色を英語の色名や16進数カラーコード（例：#ff0000）で記述することで、文字の色を簡単に変更できます。

例として、次のコードは青色の文字を表示する方法です。

<font color="#0000ff">この文字は青色です</font>

また、次のようにRGB値を使用して色を指定することも可能です。

<font color="rgb(255,0,0)">このテキストは赤色です</font>

RGBの各値（赤、緑、青）の組み合わせで微調整を行い、より詳細な色の指定が可能になります。

HTMLで文字色指定時の注意点と非推奨タグ

非推奨！？ fontタグについて

<font>タグは、HTMLの初期から文字の色やサイズを指定するために使われてきましたが、現在では非推奨となっています。（HTML公式ページ<font>）

HTML5の仕様において、このタグは使わないことが推奨されており、代わりにCSSを用いたスタイル設定が一般的です。なぜなら、<font>タグはデザインと構造が混在するため、HTMLの目的である「構造を記述する言語」としての役割から逸脱してしまうからです。

<font>タグを使う問題点
・HTML5以降では非推奨
コードが読みにくくなり、保守性が低下する。

・保守が大変
複数ページや複数要素に同じ色を適用する場合、すべての箇所に <font> タグを書かなければならず非効率。

・デザインの一貫性が崩れる
更新作業の際にミスが発生しやすく、統一感を保ちにくい。

・互換性の問題
最新ブラウザでは表示されても、古いブラウザや特定環境では崩れる可能性がある。

これらの理由から、現在では<font>タグではなく、CSSを使ってスタイルを管理することが推奨されています。

CSSを使えば、スタイルを一元管理でき、より柔軟で効率的なコードを書くことができます。特に、外部スタイルシートを使えば、複数のページや要素に同じスタイルを適用することが可能になり、更新も簡単です。

ペン博士

<font>タグは過去に便利だったものの、現在はその使用を避け、CSSでのスタイル設定に移行することが推奨されているのじゃ。

デザイン面

HTMLで文字の色を指定する際、デザイン面で考慮すべきいくつかのポイントがあります。文字色の選定は、単に視覚的な要素だけでなく、全体のデザインバランスやユーザーの読みやすさに大きな影響を与えるため、慎重に行う必要があります。

1.コントラストの確保

背景色と文字色のコントラスト比は 4.5:1以上 が推奨。
コントラスト不足だと文字が読みづらくなり、ユーザー体験が低下してしまいます。
例えば、白背景 × 薄い黄色や淡いグレーの組み合わせは読みにくいです。

✅ コントラスト比が近い具体例

背景: #767676（灰色） × 文字: #FFFFFF（白）
背景: #595959（暗い灰色） × 文字: #F1F1F1（薄い灰色）

2. カラーパレットの統一

複数の色をランダムに使うのは避けましょう。サイト全体のデザインに一貫性を持たせるために、あらかじめカラースキームを設定します。テーマカラーに合わせてリンクや重要な要素にアクセントをつけると、プロフェッショナルな印象になります。

3. 色覚異常への配慮

例えば、赤と緑の組み合わせは識別が難しい場合が多いです。色だけに頼らず、アイコンやテキスト、装飾を組み合わせることで、誰にでも分かりやすいデザインにできます。

4. レスポンシブデザインとの組み合わせ

異なるデバイスや画面サイズに応じて、色の見え方も変化します。モバイルでは小さな文字が背景に埋もれやすいため、色コントラストや文字サイズを調整することが重要です。

ペン博士

デザイン面においては、単に「見た目が良い」だけではなく、ユーザーが快適に閲覧できるかどうかを重視した配色や文字色の選定が重要じゃ。

ブラウザの互換性

HTMLで文字の色を指定する際には、ブラウザの互換性も重要な要素です。特に異なるブラウザやバージョン間で、表示されるスタイルが一致しない場合があります。例えば、古いブラウザやモバイルブラウザなどでは、最新のCSS仕様に対応していないことがあり、思い通りのデザインが表示されない可能性があります。

<font>タグは非推奨
・かつては多くのブラウザでサポートされていたが、HTML5以降では非推奨。
・最新ブラウザではサポートが限られており、思い通りの表示にならないことがある。

CSSの色指定の挙動
・color プロパティは一般的に使えるが、すべてのブラウザで同じ解釈をするとは限らない。
・旧ブラウザでは色表現が異なる結果になることもある。

色指定方法ごとの互換性
・HEXコード（例：#ff0000） → ほとんどのブラウザで安定して表示可能。
・RGB （例：rgb(255, 0, 0)）→ ほぼすべてのモダンブラウザで利用可能。
・RGBA （例：rgba(255, 0, 0,0, 5)）→ 古いブラウザでは非対応の可能性あり（透明度が効かない）。

そのため、複雑なスタイルを適用する場合は、複数のブラウザでテストを行い、意図した通りの表示がされるか確認することが必要です。

互換性を考慮し、なるべく最新のCSS仕様を取り入れつつも、古いブラウザのユーザーに対する配慮も必要です。

ペン博士

特に、モバイルデバイスや低速なネットワーク環境においても、文字の色が正しく表示されるよう、軽量なスタイルの指定を心掛けることが重要じゃ。

CSSで文字色を自由に変える実践的な書き方

初心者でもわかるスタイル設定の基本

CSSを使って文字の色を指定する方法は、HTMLよりも効率的で柔軟性があります。初心者でも簡単に理解できる基本的なスタイル設定から始めましょう。CSSでは、colorプロパティを使用して文字の色を指定し、RGB値、16進数のカラーコード、または英語の色名を使って定義できます。

例えば、次のようにCSSで文字の色を赤に設定できます。

<p style="color: red;">この文字は赤色です</p>

この例では、<p>タグ（段落）のテキストを赤色にしています。CSSのstyle属性を使用して、HTMLタグ内でスタイルを指定する方法は、インラインスタイルと呼ばれます。初心者がまず覚えるべき簡単な方法で、特定の要素にすぐにスタイルを適用できるため便利です。

さらに、CSSを使うことで、複数の要素に対して一度にスタイルを適用することができます。例えば、次のように<style>タグを使ってページ全体の段落に色を適用することができます。

<style>
  p {
    color: blue;
  }
</style>

このコードでは、ページ内のすべての段落が青色で表示されるようになります。これを内部スタイルシートと呼びます。CSSを使うことで、文字の色だけでなく、フォントサイズや背景色などのスタイルもまとめて管理できるため、サイト全体のデザインが統一され、保守も容易になります。

ペン博士

スタイル設定の基本は、HTMLコードと分離して記述することで、コードが読みやすくなる。初心者のうちはインラインスタイルを使うこともあるが、より効率的な方法として、CSSを学び、外部スタイルシートなどを使うことが推奨されるぞ。

CSSの基本ルールで色を指定する

CSSを使って文字の色を指定する際、基本となるのはcolorプロパティです。colorプロパティを使うことにより、テキストの色を簡単に定義できます。指定方法としては、カラー名、16進数、RGB（Red, Green, Blue）などを使用します。ここでは、それぞれの使い方と基本ルールについて解説します。

色名を使う

CSSでは、簡単に指定できる標準的な色名が用意されています。たとえば、次のコードでは文字色を「赤」に指定しています。

p {
  color: red;
}

この場合、<p>タグ（段落）の文字は赤色で表示されます。色名を使う方法は、シンプルで初心者にもわかりやすい方法です。ただし、色名のバリエーションが限られているため、細かな色指定には他の方法を使います。

16進数を使う

より正確な色を指定したい場合、16進数（Hexコード）を使用します。たとえば、次のコードは文字を青に設定しています。

h1 {
  color: #0000FF
}

16進数は、#の後に6桁の数字で表します。最初の2桁が赤、次の2桁が緑、最後の2桁が青を示しており、この数値の組み合わせによって色を決定します。たとえば、#000000は黒、#FFFFFFは白を表します。

RGBを使う

RGB値を使った色指定も可能です。こちらも正確な色指定ができ、透明度（RGBA）を加えることもできます。次の例では、RGB値を使ってテキストを緑色に設定しています。

span {
  color: rgb(0,128,0);
}

RGBはそれぞれ0〜255の範囲で指定でき、rgb(0,128,0)は緑色を示します。透明度を追加する場合、rgba()で設定できます。

HSL (Hue, Saturation, Lightness)

色相、彩度、明度を使って色を設定する方法もあります。これを使うことで、色の調整がさらに細かく可能です。次の例では、青みの強い緑を指定しています。

div {
  color: hsl(120, 100%, 50%);
}

ここでは、色相120度（緑）、彩度100%、明度50%の色を設定しています。

CSSの基本ルールで文字色を指定する方法は非常に柔軟で、サイト全体のデザインに統一感を持たせることができます。

内部CSSと外部CSSによる違い

CSSで文字の色を指定する際、CSSをどこに記述するかによって「内部CSS」と「外部CSS」の2つの方法があります。これらの違いを理解することは、効率的なスタイル管理や保守性の向上に役立ちます。

内部CSSは、HTMLファイル内の<head>タグに直接スタイルを記述する方法です。次の例のように、<style>タグを使ってHTML内でスタイルを定義します。

<head>
  <style>
    h1 {
      color: red;
    }
    p {
      color: blue;
    }
  </style>
</head>

内部CSSは、特定のHTMLファイル内でのみ使用され、比較的小規模なサイトや単一のページに適用する場合に便利です。簡単なページ構成や迅速な修正には有効ですが、複数のページにまたがって同じスタイルを適用したい場合には非効率です。

一方で、外部CSSは、別のファイル（通常は.cssファイル）にスタイルを記述し、それをHTMLファイルにリンクする方法です。HTMLファイルの<head>タグ内に<link>タグを使って外部CSSを読み込むことができます。

<head>
  <link rel="stylesheet" href="styles.css">
</head>

外部CSSは、複数のページに同じスタイルを適用する際に非常に便利で、サイト全体の一貫性を保ちつつ、スタイルの管理が容易になり、CSSファイルが別に分かれているため、HTMLコードがシンプルになり、読みやすくなります。

内部CSSは、迅速な変更が必要な単一ページでの利用に適している一方で、外部CSSは大規模なサイトや複数ページに共通のスタイルを適用する際に推奨されます。特に、外部CSSを使うと、1つのスタイルシートで全体のデザインを統一できるため、効率的なコーディングが可能です。

ペン博士

以上のように、内部CSSと外部CSSは、それぞれの目的や規模に応じて使い分けることが重要じゃ。

HTMLとCSSどちらを使うべき？メリット・デメリット比較

HTMLタグとCSSの役割

HTMLとCSSは、Webサイトの構造とデザインを構築する上で、それぞれ異なる役割を果たします。まず、HTMLはWebページの構造を定義するための言語です。HTMLタグを使って、ページの見出し、段落、リスト、リンク、画像などの要素を作成します。たとえば、次のようなコードで、見出しと段落が定義されます。

<h1>Webデザインの基本</h1>
<p>HTMLとCSSを学ぶことは、Webサイト作成の第一歩です。</p>

この例では、<h1>タグが見出しを、<p>タグが段落を定義しています。HTMLの役割は、このようにコンテンツの構造を定義し、ページ上にどのような情報が存在するかを指定することです。

一方、CSSは、HTMLで定義された構造にデザインやスタイルを適用するための言語です。具体的には、文字の色、フォントのサイズ、レイアウト、余白、背景色などを設定します。CSSを使うことで、Webページが視覚的に整ったデザインになります。例えば、以下のコードは、上記のHTMLにCSSを使ってスタイルを適用した例です。

h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: gray;
  font-size: 16px;
}

このCSSは、見出し（<h1>）を青色、フォントサイズを24pxに設定します。段落（<p>）の文字色を灰色、フォントサイズを16pxに設定しています。HTMLでページの構造を定義し、CSSでその構造にデザインを施すという役割分担があるのです。

ペン博士

HTMLが「コンテンツの骨組み」を作り、CSSがその上に「デザインの装飾」を施すという考え方を理解することで、効率的にWebデザインを構築できる。HTMLとCSSの役割を明確に区別することが、保守性の高いコードを書くための鍵となるぞ。

効率的に使うためのポイント

1. HTMLで必要最低限の構造を定義する

HTMLでは、ページの見出しや段落、リンク、リストなどの構造を適切に定義することが大切です。無駄なタグや冗長な記述を避け、シンプルかつ意味のある構造を作ることで、SEO（サイトの検索順位）にも有利になります。たとえば、見出しタグ（<h1>〜<h6>）はページの階層構造を明確にするために使い、見出しを正しく使うことで検索エンジンがページ内容をより理解しやすくなります。

2. CSSを使って一元管理する

CSSでは、文字の色やフォントサイズ、余白や背景色などを一元管理できます。外部スタイルシートを使用することで、複数のページにわたって同じスタイルを適用でき、保守が容易になります。例えば、全ページで共通するスタイルは外部CSSファイルにまとめることで、1つの変更が全ページに反映されるため、効率的な作業が可能です。また、CSSクラスを活用して、同じスタイルを複数の要素に適用することで、コードの簡潔化が図れます。

3. レスポンシブデザインを取り入れる

現代のWebデザインでは、PCやスマートフォン、タブレットなど異なるデバイスに対応したレスポンシブデザインが求められます。CSSのメディアクエリを使って、画面サイズに応じたスタイルを適用することができます。たとえば、次のようにCSSにメディアクエリを追加することで、画面幅が600px以下の場合に文字サイズを変更できます。

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

このようにして、ユーザーがどのデバイスで閲覧しても見やすいデザインを実現できます。

メディアクエリについては以下の記事で詳しく解説しているので読んでみてください。

実践ガイド！スマホ・タブレットに対応するレスポンシブデザイン作成方法

4. HTMLとCSSを分離してメンテナンス性を向上させる

HTML内に直接スタイルを記述するのではなく、スタイルはCSSにまとめて管理するのがおすすめです。HTMLコードはコンテンツの構造に集中でき、CSSでデザインが一括管理されるため、作業の分担がしやすくなります。特に大規模なサイトでは、この方法が保守性を大きく向上させるので非常に有効です。

このように、HTMLとCSSを効率的に使い分けることで、見やすく、機能的なWebサイトを作成することが可能です。

生徒

ペン博士、HTMLと色を変える方法と、CSSで色を変える方法の違いがやっと分かりました！

ペン博士

その意気じゃ。最初は小さな実装からでよい。だが、色を変える仕組みを体系的に理解すれば、どんなデザインにも対応できるようになるぞ。

生徒

ありがとうございます！とても勉強になりました！

特定の文字・一部だけ色を変える方法（span活用）

「文章の中の特定の単語だけ色を変えたい」という場面では、<span>タグで対象部分だけを囲み、CSSで色を指定します。段落全体ではなく“一部だけ”ピンポイントに装飾できるのが特徴です。

文章の一部だけ色を変える（インラインspan）

<p>これは<span style="color: #e53935;">重要な部分</span>だけ赤色にした例です。</p>

CSSクラスで繰り返し使う色を管理する

同じ色を何度も使うなら、インラインstyleではなくクラスで管理すると保守性が上がります。色を変えたいときはCSSの1か所を直すだけで全ページに反映できます。

<style>
  .text-red  { color: #e53935; }
  .text-blue { color: #1e88e5; }
</style>

<p>ここは<span class="text-red">赤色</span>、ここは<span class="text-blue">青色</span>です。</p>

太字・マーカーと組み合わせて強調する

色だけでなく太字やマーカー風の背景と組み合わせると、より視線を集められます。使いすぎると逆に読みにくくなるため、1画面に1〜2か所を目安にしましょう。

<p>結論は<strong style="color:#e53935;">ここが最重要</strong>です。</p>
<p>次に<span style="background: linear-gradient(transparent 60%, #fff59d 60%);">マーカー風の強調</span>も効果的です。</p>

コピペで使える文字色カラーコード早見表

「色の名前は分かるけどコードが思い出せない」というときのための早見表です。HEXコード（#で始まる6桁）をそのまま color にコピペすれば使えます。

色名	カラーコード	使いどころ
ベースの黒（推奨）	#333333	本文テキスト。真っ黒より目に優しい
やや薄いグレー	#666666	補足・キャプション
赤（強調）	#e53935	注意書き・重要語句
青（リンク調）	#1976d2	リンク・見出し
緑（成功）	#43a047	OK・ポジティブ表現
オレンジ	#fb8c00	ボタン・CTA
白	#ffffff	濃い背景上の文字

使い方はHEXコードを color プロパティに入れるだけです。

<p style="color: #e53935;">赤い注意文</p>
<p style="color: #1976d2;">青い見出し風</p>

【2026年最新】color-mix・相対色・light-dark で色をもっと自在に扱う

2024年以降、CSSの色指定は大きく進化しました。色を混ぜる・既存の色から作る・ダークモードで自動切替するといった処理が、JavaScriptやプリプロセッサなしのCSSだけで完結します。文字色の表現の幅が一気に広がるので、ぜひ押さえておきましょう。

color-mix() で2色を混ぜる

color-mix() は2つの色を指定した割合で混ぜられる関数です。「メインカラーを20%だけ白に寄せた薄い文字色」などをコード上で計算でき、パレットの統一感が保てます。

.text-soft {
  /* ブランド色を20%だけ白に寄せて、少し淡い文字色にする */
  color: color-mix(in srgb, #d16176 80%, white);
}

相対色構文（Relative Color）で既存色から作る

rgb(from ...) や hsl(from ...) を使うと、ある色を基準に明度や彩度だけを変えた派生色を作れます。ホバー時に少し暗くする、といった処理がCSS変数と相性抜群です。

:root { --brand: #d16176; }

.link:hover {
  /* 基準色の明度(l)を0.8倍に落として、ホバー時だけ濃くする */
  color: hsl(from var(--brand) h s calc(l * 0.8));
}

light-dark() でダークモードの文字色を1行で切替

light-dark() を使えば、ライト／ダークそれぞれの文字色を1つのプロパティにまとめて書けます。メディアクエリを増やさずにダークモード対応ができます。

:root { color-scheme: light dark; }

body {
  /* 明るいテーマなら#222、暗いテーマなら#eee を自動選択 */
  color: light-dark(#222, #eee);
}

これらの新機能はChrome・Edge・Safari・Firefox の最新版で利用可能です。未対応環境が心配な場合は、@supports (color: color-mix(in srgb, red, blue)) でフォールバックを用意しておくと安全です。

文字色が変わらないときの5つの対処法

「colorを書いたのに色が反映されない」というトラブルは初心者によくあります。次の順にチェックしてください。

スペルミス：colorをcolourと書いていないか、末尾の;が抜けていないか。
優先順位（詳細度）：他のCSSが後から上書きしている。より詳細なセレクタか!importantで対処。
外部CSSの読み込み：<link>のパスが間違っていないか。
ブラウザキャッシュ：スーパーリロード（Ctrl/Cmd+Shift+R）で再読み込み。
インラインstyleの上書き：HTML側のstyle=""が最優先で勝つ点に注意。

どうしても上書きしたい場合は!importantが有効ですが、多用は保守性を下げるので最終手段にします。

.text {
  color: red;      /* 効かない？ */
}
.text {
  color: blue !important;  /* 優先度を上げて上書き */
}

まとめ：文字色変更のベストプラクティス

HTMLとCSSを使った文字の色指定は、初心者にとっても理解しやすい基本的なスキルです。本記事の要点は以下の通りです。

<font>タグの現状
・かつては文字色を簡単に変更するために使用されていた
・現在は非推奨（HTML5以降では使わないことが推奨されている）

CSSでの色指定のメリット
・colorプロパティを使って効率的に文字の色を変更できる
・内部CSSと外部CSSを使い分けることで、柔軟に管理可能
・スタイルの一元管理ができ、大規模サイトでも効率的にスタイルを適用できる

レスポンシブ対応も可能
・CSSを用いれば、PC・スマホ・タブレットなどさまざまなデバイスに対応
・デザインを統一しつつ、画面サイズごとに最適な表示を実現できる

HTMLとCSSを適切に組み合わせて使うことが、デザインの一貫性を保ちつつ、読みやすく、魅力的なWebページを作成するための重要なポイントです。HTMLが構造を作り、CSSがスタイルを提供するという役割分担を理解し、柔軟に活用することで、Webデザインのスキルの向上につながります。

本記事で紹介した方法をぜひご活用ください。

参考リンク（公式・一次情報）

よくある質問（FAQ）

Q1. HTMLで文字色を変える<font>タグは今も使えますか？

A. <font>タグはHTML5以降では非推奨です。デザインと構造が混在して保守性が下がり、複数箇所への適用が非効率で、互換性の問題もあります。現在は<font>タグではなく、CSSのcolorプロパティでスタイルを管理することが推奨されています。

Q2. CSSで文字色を指定する方法にはどんなものがありますか？

A. colorプロパティを使い、色名（redなど）、16進数のカラーコード（#ff0000など）、RGB値（rgb(255,0,0)など）、HSL（色相・彩度・明度）で指定できます。16進数やRGBはほとんどのモダンブラウザで安定して表示できます。

Q3. 文字色を選ぶときに気をつけるべきデザイン上のポイントは？

A. 背景色と文字色のコントラスト比は4.5:1以上が推奨されます。カラーパレットを統一し、赤と緑のように色覚異常の方に識別しづらい組み合わせは色だけに頼らずアイコンや装飾を併用します。レスポンシブ対応で見え方の変化にも配慮が必要です。

Q4. インラインスタイルと外部スタイルシートはどう使い分ければよいですか？

A. インラインスタイルはHTMLタグ内に直接記述する方法で、特定の要素にすぐ適用でき初心者向けです。ただし大規模サイトでは、HTMLとCSSを分離して外部スタイルシートで一元管理する方が、保守性が高く効率的なため推奨されます。

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

動画や実践で楽しく学べる：初心者でも安心のカリキュラム
スマホ・PCどちらでもOK：好きな時間に学習できる
料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート

この記事を書いた人

WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

HTMLとCSSで文字色を変える方法｜初心者向け完全ガイド

この記事の結論

HTMLのcolorタグで文字色を指定する3つの方法

fontタグを使う

HTMLで文字色指定時の注意点と非推奨タグ

非推奨！？ fontタグについて

デザイン面

1.コントラストの確保

2. カラーパレットの統一

3. 色覚異常への配慮

4. レスポンシブデザインとの組み合わせ

ブラウザの互換性

CSSで文字色を自由に変える実践的な書き方

初心者でもわかるスタイル設定の基本

CSSの基本ルールで色を指定する

色名を使う

16進数を使う

RGBを使う

HSL (Hue, Saturation, Lightness)

内部CSSと外部CSSによる違い

HTMLとCSSどちらを使うべき？メリット・デメリット比較

HTMLタグとCSSの役割

効率的に使うためのポイント

1. HTMLで必要最低限の構造を定義する

2. CSSを使って一元管理する

3. レスポンシブデザインを取り入れる

4. HTMLとCSSを分離してメンテナンス性を向上させる

特定の文字・一部だけ色を変える方法（span活用）

文章の一部だけ色を変える（インラインspan）

CSSクラスで繰り返し使う色を管理する

太字・マーカーと組み合わせて強調する

コピペで使える文字色カラーコード早見表

【2026年最新】color-mix・相対色・light-dark で色をもっと自在に扱う

color-mix() で2色を混ぜる

相対色構文（Relative Color）で既存色から作る

light-dark() でダークモードの文字色を1行で切替

文字色が変わらないときの5つの対処法

まとめ：文字色変更のベストプラクティス

関連記事

参考リンク（公式・一次情報）

よくある質問（FAQ）

Q1. HTMLで文字色を変える<font>タグは今も使えますか？

Q2. CSSで文字色を指定する方法にはどんなものがありますか？

Q3. 文字色を選ぶときに気をつけるべきデザイン上のポイントは？

Q4. インラインスタイルと外部スタイルシートはどう使い分ければよいですか？

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

この記事を書いた人

関連記事

– service –WithGroupの運営サービス