MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】文字色の指定・変更方法：カラーコード一覧やCSS指定・一部だけ変える

【HTML】文字色の指定・変更方法：カラーコード一覧やCSS指定・一部だけ変える

HTML&CSS
css-font-color

Webデザインにおいて、文字色の変更は見た目だけでなく、ユーザーへの「情報の伝わりやすさ」を左右する要素です。

本記事では、CSSを使った正しい文字色の指定方法、ボタンやリンク特有の仕様、読みやすさを担保する配色ルール、「色が変わらない」時の解決策などを解説します。

目次

文字色を変える基本の書き方（CSS）

Webサイトを作る上で、「注意書きを赤くしたい」「ブランドカラーを目立たせたい」など、文字の大きさを変えるのと同じくらい実施するのが「文字色の変更」です。

ここでは、文字色をコントロールする基本知識を学べます。

テキストの文字を好きな色にする正しいアプローチ、CSSを活用した管理方法を解説します。

文字色を変える基本の書き方（CSS）
  • インラインスタイルと外部CSSでの記述方法
  • 文字色を一部だけ変える（spanタグ）

インラインスタイルと外部CSSでの記述方法

現在は、HTMLは「文章の意味」、CSSは「見た目のデザイン」と役割を分けるのがルールです。

文字色を指定する際は、HTML側には<p class="text-danger">のようにクラスをつけ、外部のCSSファイルで.text-danger { color: red; }と記述して一元管理するのがよいです。

❌ 悪い例（古いタグ・style直書き）
廃止されたfontタグでの色指定
インラインのstyle直書きでの色指定
<!– ⚠️ 使ってはいけない古いタグ –>
<font color=”red”>廃止されたタグ</font>

<!– ⚠️ 修正が地獄になる直書き –>
<p style=”color: blue;”>直書き</p>
⭕️ 良い例（クラス名で外部CSS管理）
エラー：入力内容を確認してください。
お知らせ：アップデートが完了しました。
<!– HTML：名前（クラス）だけをつける –>
<p class=”text-alert”>エラー：…</p>
<p class=”text-info”>お知らせ：…</p>

/* CSS：スタイルシート側で色を指定 */
.text-alert {
  color: #dc3545; /* 赤系 */
}
.text-info {
  color: #0d6efd; /* 青系 */
}
HTMLコード表示
<div class="hcolor-base1-wrapper">
  
  <div class="hcolor-base1-demo-area">
    
    <div class="hcolor-base1-box">
      <div class="hcolor-base1-label" style="color:#dc3545;">❌ 悪い例（古いタグ・style直書き）</div>
      
      <div class="hcolor-base1-visual">
        <div style="color: #dc3545; font-weight: bold; margin-bottom: 10px;">廃止されたfontタグでの色指定</div>
        <div style="color: #0d6efd;">インラインのstyle直書きでの色指定</div>
      </div>

      <div class="hcolor-base1-code hcolor-base1-code-bad">
        <!-- ⚠️ 使ってはいけない古いタグ --><br>
        <span class="hcolor-base1-hl-red"><font color="red"></span>廃止されたタグ<span class="hcolor-base1-hl-red"></font></span><br><br>
        <!-- ⚠️ 修正が地獄になる直書き --><br>
        <p <span class="hcolor-base1-hl-red">style="color: blue;"</span>>直書き</p>
      </div>
    </div>

    <div class="hcolor-base1-box">
      <div class="hcolor-base1-label" style="color:#198754;">⭕️ 良い例（クラス名で外部CSS管理）</div>
      
      <div class="hcolor-base1-visual">
        <div class="hcolor-base1-good-alert">エラー：入力内容を確認してください。</div>
        <div class="hcolor-base1-good-info">お知らせ：アップデートが完了しました。</div>
      </div>

      <div class="hcolor-base1-code hcolor-base1-code-good">
        <!-- HTML：名前（クラス）だけをつける --><br>
        <p <span class="hcolor-base1-hl-green">class="text-alert"</span>>エラー：…</p><br>
        <p <span class="hcolor-base1-hl-green">class="text-info"</span>>お知らせ：…</p><br><br>
        /* CSS：スタイルシート側で色を指定 */<br>
        <span class="hcolor-base1-hl-green">.text-alert</span> {<br>
          color: #dc3545; /* 赤系 */<br>
        }<br>
        <span class="hcolor-base1-hl-green">.text-info</span> {<br>
          color: #0d6efd; /* 青系 */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-base1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-base1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hcolor-base1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hcolor-base1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hcolor-base1-visual {
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
  font-size: 14px;
}

/* ⭕️ 良い例のCSSクラス */
.hcolor-base1-good-alert {
  color: #dc3545;
  font-weight: bold;
  margin-bottom: 10px;
}
.hcolor-base1-good-info {
  color: #0d6efd;
}

.hcolor-base1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hcolor-base1-code-bad { border-left: 4px solid #dc3545; }
.hcolor-base1-code-good { border-left: 4px solid #198754; }
.hcolor-base1-hl-red { color: #e06c75; font-weight: bold; }
.hcolor-base1-hl-green { color: #98c379; font-weight: bold; }

CSSの記述方法を詳しく知りたい人は「【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ」を一読ください。

【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ

文字色を一部だけ変える（spanタグ）

文章全体ではなく、「今月限定のキャンペーン」など、特定のキーワードの色を一部変更したい場面は多くあります。

文章の一部を装飾したい場合は、<span>タグを使用します。

<span>は前後に改行を伴わない「インライン要素」であり、「文章の一部を切り取ってCSSを当てる」専用の目印タグです。

💡 文字色を「一部だけ」変える正しい方法

❌ 悪い例（pタグやdivタグで囲んで改行される）

当店の商品は、
国産素材100%
を使用しており、安心・安全です。

⭕️ 良い例（spanタグでインラインに色を変える）

当店の商品は、国産素材100%を使用しており、安心・安全です。
<!– ❌ divタグだと前後で改行されて文章が崩れる –>
当店の商品は、<div class=”highlight”>国産素材100%</div>を使用しており…

<!– ⭕️ 専門のspanタグを使えば、行の中に綺麗に収まる –>
当店の商品は、<span class=”highlight”>国産素材100%</span>を使用しており…

※「spanタグ」自体には特別な意味はないため、単なるCSSデザイン用の目印として、文章のどこにでも安全に使うことができます。

HTMLコード表示
<div class="hcolor-span1-wrapper">
  
  <div class="hcolor-span1-demo-area">
    
    <div class="hcolor-span1-box">
      <div class="hcolor-span1-label">💡 文字色を「一部だけ」変える正しい方法</div>
      
      <div class="hcolor-span1-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例（pタグやdivタグで囲んで改行される）</p>
        <div class="hcolor-span1-bad-text">
          当店の商品は、<div class="hcolor-span1-highlight-bad">国産素材100%</div>を使用しており、安心・安全です。
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 良い例（spanタグでインラインに色を変える）</p>
        <div class="hcolor-span1-good-text">
          当店の商品は、<span class="hcolor-span1-highlight-good">国産素材100%</span>を使用しており、安心・安全です。
        </div>
      </div>

      <div class="hcolor-span1-code">
        <!-- ❌ divタグだと前後で改行されて文章が崩れる --><br>
        当店の商品は、<span class="hcolor-span1-hl-red"><div class="highlight"></span>国産素材100%<span class="hcolor-span1-hl-red"></div></span>を使用しており…<br><br>
        <!-- ⭕️ 専門のspanタグを使えば、行の中に綺麗に収まる --><br>
        当店の商品は、<span class="hcolor-span1-hl-green"><span class="highlight"></span>国産素材100%<span class="hcolor-span1-hl-green"></span></span>を使用しており…
      </div>
      <p class="hcolor-span1-note">※「spanタグ」自体には特別な意味はないため、単なるCSSデザイン用の目印として、文章のどこにでも安全に使うことができます。</p>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-span1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-span1-demo-area {
  display: flex;
  justify-content: center;
}
.hcolor-span1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hcolor-span1-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hcolor-span1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.hcolor-span1-bad-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.hcolor-span1-highlight-bad {
  color: #d63384;
  font-weight: bold;
  /* divタグの標準挙動（ブロック要素）により改行される */
}

.hcolor-span1-good-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.hcolor-span1-highlight-good {
  color: #d63384;
  font-weight: bold;
  /* spanタグはインライン要素なので改行されない */
}

.hcolor-span1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.hcolor-span1-hl-red { color: #e06c75; font-weight: bold; }
.hcolor-span1-hl-green { color: #98c379; font-weight: bold; }
.hcolor-span1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

<span>タグの使い方を詳しく知りたい人は「【HTML】spanタグの使い方：divとの違いやCSS装飾・幅が効かない時の対策」を一読ください。

【HTML】spanタグの使い方：divとの違いやCSS装飾・幅が効かない時の対策

カラーコードと色の指定方法

Webデザインにおいて、文字色をコントロールするには「カラーコード」の理解が欠かせません。

実務では「赤」「白」「青」「黒」といった基本的な色であっても、なんとなくで決めるのではなく、デザインルールに基づいたコードの一覧を定義して運用します。

ここでは、色の指定方法の種類、実務の現場で意識する目に優しい色の選び方やよく使われる定番の指定一覧を解説します。

カラーコードと色の指定方法
  • 16進数・RGB・カラーネームの使い分け
  • タグ別：よく使う文字色の指定一覧

16進数・RGB・カラーネームの使い分け

CSSで文字色を指定する方法には、主に「カラーネーム」「16進数（HEX）」「RGB（RGBA）」の3種類があります。

実務での文字色は、「16進数カラーコード（例：#e60012）」 を使って指定します。

これにより、どんな環境でも1ピクセルの狂いもなくデザイナーが意図した正確な色を再現できます。

また、文字を「半透明」にしたい場合のみ、「RGBA指定（例：rgba(0, 0, 0, 0.5)）」 を使い分けるのがスタンダードです。

🎨 3つの色指定方法の比較

❌ 悪い例：カラーネーム（原色で目が痛い）

color: red;（原色の赤はデザインから浮く）

⭕️ 良い例：16進数コード（実務の標準）

color: #d63384;（落ち着いた上品なピンク）

💡 応用例：RGBA（半透明にしたい時）

color: rgba(0, 0, 0, 0.5);（黒の50%透過）
/* ❌ カラーネーム（テスト以外では使わない） */
.text-bad {
  color: red;
}

/* ⭕️ 16進数（HEXコード。実務の絶対基準） */
.text-good {
  color: #d63384; /* #の付け忘れに注意！ */
}

/* 💡 RGBA（透明度を使いたい時の専用指定） */
.text-trans {
  color: rgba(0, 0, 0, 0.5); /* 赤, 緑, 青, 透明度 */
}
HTMLコード表示
<div class="hcolor-code1-wrapper">
  
  <div class="hcolor-code1-demo-area">
    
    <div class="hcolor-code1-box">
      <div class="hcolor-code1-label">🎨 3つの色指定方法の比較</div>
      
      <div class="hcolor-code1-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例：カラーネーム（原色で目が痛い）</p>
        <div class="hcolor-code1-bad-name">
          color: red;（原色の赤はデザインから浮く）
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 良い例：16進数コード（実務の標準）</p>
        <div class="hcolor-code1-good-hex">
          color: #d63384;（落ち着いた上品なピンク）
        </div>

        <p style="font-size:12px; color:#0d6efd; font-weight:bold; margin:20px 0 5px 0;">💡 応用例：RGBA（半透明にしたい時）</p>
        <div class="hcolor-code1-rgba-bg">
          <div class="hcolor-code1-good-rgba">
            color: rgba(0, 0, 0, 0.5);（黒の50%透過）
          </div>
        </div>
      </div>

      <div class="hcolor-code1-code">
        /* ❌ カラーネーム（テスト以外では使わない） */<br>
        <span class="hcolor-code1-hl-green">.text-bad</span> {<br>
          color: <span class="hcolor-code1-hl-red">red</span>;<br>
        }<br><br>
        /* ⭕️ 16進数（HEXコード。実務の絶対基準） */<br>
        <span class="hcolor-code1-hl-green">.text-good</span> {<br>
          color: <span class="hcolor-code1-hl-blue">#d63384</span>; /* #の付け忘れに注意！ */<br>
        }<br><br>
        /* 💡 RGBA（透明度を使いたい時の専用指定） */<br>
        <span class="hcolor-code1-hl-green">.text-trans</span> {<br>
          color: <span class="hcolor-code1-hl-blue">rgba(0, 0, 0, 0.5)</span>; /* 赤, 緑, 青, 透明度 */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-code1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-code1-demo-area {
  display: flex;
  justify-content: center;
}
.hcolor-code1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hcolor-code1-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hcolor-code1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* カラーネーム（悪い例） */
.hcolor-code1-bad-name {
  font-size: 15px;
  font-weight: bold;
  color: red; /* 原色 */
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* 16進数（良い例） */
.hcolor-code1-good-hex {
  font-size: 15px;
  font-weight: bold;
  color: #d63384; /* 調整された色 */
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* RGBA（透過の例） */
.hcolor-code1-rgba-bg {
  /* 透過がわかるように背景に模様をつける */
  background-image: radial-gradient(#ced4da 20%, transparent 20%);
  background-size: 10px 10px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.hcolor-code1-good-rgba {
  font-size: 15px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5); /* 黒を50%透かす */
}

.hcolor-code1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hcolor-code1-hl-green { color: #98c379; font-weight: bold; }
.hcolor-code1-hl-red { color: #e06c75; font-weight: bold; }
.hcolor-code1-hl-blue { color: #61afef; font-weight: bold; }

カラーコードを詳しく知りたい人は「【HTML】カラーコードの指定方法：文字色・背景色・透過やツール」を一読ください。

【HTML】カラーコードの指定方法：文字色・背景色・透過やツール

タグ別：よく使う文字色の指定一覧

Webサイトを制作する際、「どのタグに、どのようなカラーコードを指定するべきか」といったよく使われる文字色一覧のベストプラクティスが存在します。

実務では、本文の文字に「純粋な黒」は使いません。

少しグレーを混ぜた 「ソフトブラック（#333333や#222222）」 を使用するのが、読みやすく疲れないサイトを作るWebデザインの通例です。

また、リンク（<a>タグ）はユーザーが「ここは押せる」と直感的に理解できるよう、ブラウザ標準ではなくサイトのテーマに合ったブランドカラーを指定して差別化します。

📋 タグ・役割別の推奨カラーコード一覧

❌ 本文を「真っ黒（#000000）」にした場合

真っ黒（#000000）の文字です。白背景との対比が強すぎで、長文を読むと目がチカチカして非常に疲れてしまいます。

⭕️ 実務で使われるタグ別カラー設定一覧

対象タグ・役割 推奨コード 見た目のサンプル
本文 (p, span) #333333 目に優しい黒（墨色）
リンク (a) #0d6efd 押せる青色リンク
エラー・注意喚起 #dc3545 危険を知らせる赤色
補足・注釈 (small) #6c757d 目立たせないグレー
背景が濃い場合 #ffffff 白抜きの文字
/* サイト全体の基本設定（真っ黒を避ける） */
body {
  color: #333333; /* これが最も重要！ */
}

/* リンクタグの色指定 */
a {
  color: #0d6efd;
  text-decoration: underline;
}

※「黒は#333333にする」というルールだけでも覚えておくと、Webサイトのクオリティと読みやすさが劇的に向上します。

HTMLコード表示
<div class="hcolor-list2-wrapper">
  
  <div class="hcolor-list2-demo-area">
    
    <div class="hcolor-list2-box">
      <div class="hcolor-list2-label">📋 タグ・役割別の推奨カラーコード一覧</div>
      
      <div class="hcolor-list2-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 本文を「真っ黒（#000000）」にした場合</p>
        <div class="hcolor-list2-bad-text">
          真っ黒（#000000）の文字です。白背景との対比が強すぎで、長文を読むと目がチカチカして非常に疲れてしまいます。
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 実務で使われるタグ別カラー設定一覧</p>
        
        <table class="hcolor-list2-table">
          <thead>
            <tr>
              <th>対象タグ・役割</th>
              <th>推奨コード</th>
              <th>見た目のサンプル</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="hcolor-list2-td-name">本文 (p, span)</td>
              <td><code>#333333</code></td>
              <td style="color: #333333; font-weight: bold;">目に優しい黒（墨色）</td>
            </tr>
            <tr>
              <td class="hcolor-list2-td-name">リンク (a)</td>
              <td><code>#0d6efd</code></td>
              <td style="color: #0d6efd; font-weight: bold; text-decoration: underline;">押せる青色リンク</td>
            </tr>
            <tr>
              <td class="hcolor-list2-td-name">エラー・注意喚起</td>
              <td><code>#dc3545</code></td>
              <td style="color: #dc3545; font-weight: bold;">危険を知らせる赤色</td>
            </tr>
            <tr>
              <td class="hcolor-list2-td-name">補足・注釈 (small)</td>
              <td><code>#6c757d</code></td>
              <td style="color: #6c757d;">目立たせないグレー</td>
            </tr>
            <tr>
              <td class="hcolor-list2-td-name">背景が濃い場合</td>
              <td><code>#ffffff</code></td>
              <td style="background-color: #212529; color: #ffffff; text-align: center; padding: 2px;">白抜きの文字</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="hcolor-list2-code">
        /* サイト全体の基本設定（真っ黒を避ける） */<br>
        <span class="hcolor-list2-hl-green">body</span> {<br>
          color: <span class="hcolor-list2-hl-blue">#333333</span>; /* これが最も重要！ */<br>
        }<br><br>
        /* リンクタグの色指定 */<br>
        <span class="hcolor-list2-hl-green">a</span> {<br>
          color: <span class="hcolor-list2-hl-blue">#0d6efd</span>;<br>
          text-decoration: underline;<br>
        }
      </div>
      <p class="hcolor-list2-note">※「黒は#333333にする」というルールだけでも覚えておくと、Webサイトのクオリティと読みやすさが劇的に向上します。</p>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-list2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-list2-demo-area {
  display: flex;
  justify-content: center;
}
.hcolor-list2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.hcolor-list2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hcolor-list2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* ❌ 目が疲れる真っ黒 */
.hcolor-list2-bad-text {
  font-size: 14px;
  color: #000000; /* 真っ黒 */
  font-weight: bold;
  line-height: 1.6;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* ⭕️ タグ別の一覧表 */
.hcolor-list2-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  font-size: 13px;
}
.hcolor-list2-table th, .hcolor-list2-table td {
  border: 1px solid #ced4da;
  padding: 8px;
  text-align: left;
}
.hcolor-list2-table th {
  background-color: #e9ecef;
  color: #495057;
  font-weight: bold;
}
.hcolor-list2-td-name {
  font-weight: bold;
  color: #495057;
}
.hcolor-list2-table code {
  background-color: #f8f9fa;
  color: #d63384;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

.hcolor-list2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.hcolor-list2-hl-green { color: #98c379; font-weight: bold; }
.hcolor-list2-hl-blue { color: #61afef; font-weight: bold; }
.hcolor-list2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

要素別：テーブル・ボタン・セレクトボックスの文字色

Webサイトを制作する中で、文字色の設定が特殊なのが「テーブル（表）」と「フォーム関連の要素（ボタンやセレクトボックス）」です。

単なるテキスト（pタグなど）とは異なり、ブラウザやOSが持っているデフォルトのスタイルが適用されるため、「CSSを書いたのに色が一部しか変わらない」「親要素の色が引き継がれない」といったトラブルが多発します。

ここでは、それぞれの要素に対する正しい文字色の指定方法を解説します。

テーブル・ボタン・セレクトボックスの文字色
  • テーブル（表）の文字色
  • ボタンや入力フォームの文字色

テーブル（表）の文字色

料金表やスペック表などを作る際、テーブル全体の色を変えたり、特定のセルだけを目立たせたりするテクニックは実務で必須です。

テーブルの文字色は、大枠のtableではなく、中身の<th>（見出し）と<td>（データ）に対して個別にCSSを指定します。

また、「特定の行」や「特定のセル」だけを赤字にして強調したい場合は、tdだけ専用のクラス（例：.text-danger）を付与して色を上書きするのがよいです。

❌ 悪い例（大雑把な指定でメリハリがない）
プラン名 スタンダード
月額料金 5,000円
/* ⚠️ tableタグ全体に色を指定すると、
見出し(th)もデータ(td)も全部同じ色になる */
table {
  color: #dc3545;
}
⭕️ 良い例（細かくクラスで制御する）
プラン名 スタンダード
月額料金 5,000円
/* 💡 基本はthとtdでメリハリをつける */
th { color: #495057; }
td { color: #333333; }

/* 💡 目立たせたいセル(td)だけクラスで上書き */
.text-accent {
  color: #dc3545;
  font-weight: bold;
}
HTMLコード表示
<div class="hcolor-elem1-wrapper">
  
  <div class="hcolor-elem1-demo-area">
    
    <div class="hcolor-elem1-box">
      <div class="hcolor-elem1-label" style="color:#dc3545;">❌ 悪い例（大雑把な指定でメリハリがない）</div>
      
      <div class="hcolor-elem1-visual">
        <table class="hcolor-elem1-bad-table">
          <tr>
            <th>プラン名</th>
            <td>スタンダード</td>
          </tr>
          <tr>
            <th>月額料金</th>
            <td>5,000円</td>
          </tr>
        </table>
      </div>

      <div class="hcolor-elem1-code hcolor-elem1-code-bad">
        /* ⚠️ tableタグ全体に色を指定すると、<br>
           見出し(th)もデータ(td)も全部同じ色になる */<br>
        <span class="hcolor-elem1-hl-red">table</span> {<br>
          color: #dc3545; <br>
        }
      </div>
    </div>

    <div class="hcolor-elem1-box">
      <div class="hcolor-elem1-label" style="color:#198754;">⭕️ 良い例（細かくクラスで制御する）</div>
      
      <div class="hcolor-elem1-visual">
        <table class="hcolor-elem1-good-table">
          <tr>
            <th>プラン名</th>
            <td>スタンダード</td>
          </tr>
          <tr>
            <th>月額料金</th>
            <td class="hcolor-elem1-text-accent">5,000円</td>
          </tr>
        </table>
      </div>

      <div class="hcolor-elem1-code hcolor-elem1-code-good">
        /* 💡 基本はthとtdでメリハリをつける */<br>
        <span class="hcolor-elem1-hl-green">th</span> { color: #495057; }<br>
        <span class="hcolor-elem1-hl-green">td</span> { color: #333333; }<br><br>
        /* 💡 目立たせたいセル(td)だけクラスで上書き */<br>
        <span class="hcolor-elem1-hl-green">.text-accent</span> {<br>
          <span class="hcolor-elem1-hl-blue">color: #dc3545;</span><br>
          font-weight: bold;<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-elem1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-elem1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hcolor-elem1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hcolor-elem1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hcolor-elem1-visual {
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪い例のテーブル */
.hcolor-elem1-bad-table {
  width: 100%;
  border-collapse: collapse;
  color: #dc3545; /* 全体が赤くなる */
}
.hcolor-elem1-bad-table th, .hcolor-elem1-bad-table td {
  border: 1px solid #ced4da;
  padding: 8px;
  background-color: #fff;
}
.hcolor-elem1-bad-table th { width: 35%; text-align: left; }

/* ⭕️ 良い例のテーブル */
.hcolor-elem1-good-table {
  width: 100%;
  border-collapse: collapse;
}
.hcolor-elem1-good-table th, .hcolor-elem1-good-table td {
  border: 1px solid #ced4da;
  padding: 10px;
}
.hcolor-elem1-good-table th {
  background-color: #e9ecef;
  color: #495057; /* 見出しは少し薄い色に */
  width: 35%;
  text-align: left;
}
.hcolor-elem1-good-table td {
  background-color: #fff;
  color: #333333; /* 基本は目に優しい黒 */
}
/* アクセントクラス */
.hcolor-elem1-text-accent {
  color: #dc3545 !important;
  font-weight: bold;
}

.hcolor-elem1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hcolor-elem1-code-bad { border-left: 4px solid #dc3545; }
.hcolor-elem1-code-good { border-left: 4px solid #198754; }
.hcolor-elem1-hl-red { color: #e06c75; font-weight: bold; }
.hcolor-elem1-hl-green { color: #98c379; font-weight: bold; }
.hcolor-elem1-hl-blue { color: #61afef; font-weight: bold; }

<table>タグの使い方を詳しく知りたい人は「【HTML】tableタグ（テーブル）の作り方：枠線・セル結合・レスポンシブ」を一読ください。

【HTML】tableタグ（テーブル）の作り方：枠線・セル結合・レスポンシブ | Code Stock

ボタンや入力フォームの文字色

ユーザーにアクションを促す送信ボタンやプルダウンで選ばせるセレクトボックスの文字色は、サイトのデザインを洗練させる重要な要素です。

ボタンやセレクトボックスの文字色を変えたい場合は、要素自体に対してcolorを指定する必要があります。

もし、サイト全体の標準テキストと同じ色にしたい場合は、color: inherit;（親の色を強制的に引き継ぐ）というCSSプロパティを指定することで、面倒な仕様を回避できます。

🔘 ボタンとセレクトボックスの色設定

※この箱全体（親要素）には「青色」を指定しています。

❌ 悪い例（ボタンとselectは青色を引き継がない）

⭕️ 良い例（明示的に指定、またはinheritを使う）

/* ⚠️ 親に色を指定しても、フォーム要素は無視する */
.wrapper { color: #0d6efd; }

/* ⭕️ select：親の色を強制的に引き継がせる裏技 */
select {
  color: inherit; /* 親の青色が適用される */
}

/* ⭕️ button：背景色と一緒に直接指定する */
button {
  background-color: #0d6efd;
  color: #ffffff; /* ボタン用の色を直接指定 */
}

※文字サイズ（font-size）やフォントファミリー（font-family）も同様に引き継がれないため、一緒に inherit を指定するのが実務の定番テクニックです。

HTMLコード表示
<div class="hcolor-elem2-wrapper">
  
  <div class="hcolor-elem2-demo-area">
    
    <div class="hcolor-elem2-box">
      <div class="hcolor-elem2-label">🔘 ボタンとセレクトボックスの色設定</div>
      
      <div class="hcolor-elem2-visual" style="color: #0d6efd; border-color: #b6d4fe; background-color: #e7f1ff;">
        <p style="font-size:12px; font-weight:bold; margin:0 0 10px 0;">※この箱全体（親要素）には「青色」を指定しています。</p>
        
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:15px 0 5px 0;">❌ 悪い例（ボタンとselectは青色を引き継がない）</p>
        <div style="display:flex; gap:10px; margin-bottom: 20px;">
          <select class="hcolor-elem2-bad-select">
            <option>選択してください</option>
          </select>
          <button class="hcolor-elem2-bad-btn">送信する</button>
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ 良い例（明示的に指定、またはinheritを使う）</p>
        <div style="display:flex; gap:10px;">
          <select class="hcolor-elem2-good-select">
            <option>選択してください</option>
          </select>
          <button class="hcolor-elem2-good-btn">送信する</button>
        </div>
      </div>

      <div class="hcolor-elem2-code">
        /* ⚠️ 親に色を指定しても、フォーム要素は無視する */<br>
        <span class="hcolor-elem2-hl-green">.wrapper</span> { color: #0d6efd; }<br><br>
        /* ⭕️ select：親の色を強制的に引き継がせる裏技 */<br>
        <span class="hcolor-elem2-hl-green">select</span> {<br>
          <span class="hcolor-elem2-hl-blue">color: inherit;</span> /* 親の青色が適用される */<br>
        }<br><br>
        /* ⭕️ button：背景色と一緒に直接指定する */<br>
        <span class="hcolor-elem2-hl-green">button</span> {<br>
          background-color: #0d6efd;<br>
          <span class="hcolor-elem2-hl-blue">color: #ffffff;</span> /* ボタン用の色を直接指定 */<br>
        }
      </div>
      <p class="hcolor-elem2-note">※文字サイズ（font-size）やフォントファミリー（font-family）も同様に引き継がれないため、一緒に <code>inherit</code> を指定するのが実務の定番テクニックです。</p>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-elem2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-elem2-demo-area {
  display: flex;
  justify-content: center;
}
.hcolor-elem2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hcolor-elem2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hcolor-elem2-visual {
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 2px solid;
}

/* ❌ 悪い例（ブラウザデフォルトをシミュレート） */
.hcolor-elem2-bad-select {
  padding: 8px;
  color: #000; /* 親の青を無視して黒になる */
  border: 1px solid #767676;
}
.hcolor-elem2-bad-btn {
  padding: 8px 15px;
  color: #000; /* 親の青を無視して黒になる */
  background-color: #efefef;
  border: 1px solid #767676;
  cursor: pointer;
}

/* ⭕️ 良い例 */
.hcolor-elem2-good-select {
  padding: 8px;
  color: inherit; /* ★親の青色を引き継ぐ */
  border: 1px solid #0d6efd;
  border-radius: 4px;
  background-color: #fff;
  font-weight: bold;
}
.hcolor-elem2-good-btn {
  padding: 8px 15px;
  color: #ffffff; /* ★直接白を指定 */
  background-color: #0d6efd;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.hcolor-elem2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hcolor-elem2-hl-green { color: #98c379; font-weight: bold; }
.hcolor-elem2-hl-blue { color: #61afef; font-weight: bold; }
.hcolor-elem2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

<button>タグの使い方を詳しく知りたい人は「【HTML】buttonタグの使い方：リンク・CSS装飾・無効化」を一読ください。

また、プルダウンメニューなどの<select>タグの使い方を詳しく知りたい人は「【HTML】プルダウン・セレクトボックス・ドロップダウンの作り方：コンボボックスとの違い」を一読ください。

【HTML】buttonタグの使い方：リンク・CSS装飾・無効化
【HTML】プルダウン・セレクトボックス・ドロップダウンの作り方：コンボボックスとの違い

デザインとアクセシビリティ：文字色を活かすコツ

Webサイトの文字色を決める作業は、見た目を綺麗にするだけのものではありません。

全てのユーザーにとって情報が正しく伝わる「読みやすさ（アクセシビリティ）」を担保する重要な設計プロセスです。

ここでは、背景色とのコントラストという避けては通れない基準と文字の大きさや太字を掛け合わせた際の見せ方について解説します。

文字色を活かすコツ
  • 背景色との組み合わせ
  • 文字サイズ・太字との組み合わせ

背景色との組み合わせ

Webデザインにおいて、文字色単体で「良い色・悪い色」が決まるわけではありません。

文字の読みやすさは、常に「背景色と文字色との組み合わせ」による明暗差（コントラスト比）によって決まります。

実務のWebアクセシビリティ基準では、「通常の文字サイズの場合、背景色と文字色のコントラスト比を4.5：1 以上に保つこと」が推奨されています。

濃い背景には明るい文字色、明るい背景には十分に濃い文字色を指定し、デザインのオシャレさよりも「誰にでも読めること」を最優先に設計します。

💡 背景色と文字色のコントラスト比較

❌ 悪い例（白背景に薄いグレー）

オシャレに見えますが、屋外のスマホや視力の低い方には背景と同化して全く読めません。（コントラスト比 2.0:1 程度）

❌ 悪い例（暗い背景に暗い文字）

ダークテーマを作ろうとして失敗する典型例です。文字が背景に沈んでしまいます。

⭕️ 良い例（白背景に濃いグレー）

真っ黒（#000）は避けつつも、十分に濃いグレー（#333）を使うことで、オシャレさと読みやすさを両立できます。（コントラスト比 12:1 以上）

⭕️ 良い例（濃い背景に白抜き文字）

ブランドカラーの青など、濃い背景を敷く時は、思い切って文字色を真っ白（#fff）に抜くのがセオリーです。
HTMLコード表示
<div class="hcolor-design1-wrapper">
  
  <div class="hcolor-design1-demo-area">
    
    <div class="hcolor-design1-box">
      <div class="hcolor-design1-label">💡 背景色と文字色のコントラスト比較</div>
      
      <div class="hcolor-design1-visual" style="background-color: #fff; margin-bottom: 20px;">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例（白背景に薄いグレー）</p>
        <div class="hcolor-design1-bad-contrast1">
          オシャレに見えますが、屋外のスマホや視力の低い方には背景と同化して全く読めません。（コントラスト比 2.0:1 程度）
        </div>
      </div>

      <div class="hcolor-design1-visual" style="background-color: #343a40; margin-bottom: 20px;">
        <p style="font-size:12px; color:#ffc107; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例（暗い背景に暗い文字）</p>
        <div class="hcolor-design1-bad-contrast2">
          ダークテーマを作ろうとして失敗する典型例です。文字が背景に沈んでしまいます。
        </div>
      </div>

      <div class="hcolor-design1-visual" style="background-color: #fff; margin-bottom: 20px; border: 2px solid #198754;">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ 良い例（白背景に濃いグレー）</p>
        <div class="hcolor-design1-good-contrast1">
          真っ黒（#000）は避けつつも、十分に濃いグレー（#333）を使うことで、オシャレさと読みやすさを両立できます。（コントラスト比 12:1 以上）
        </div>
      </div>

      <div class="hcolor-design1-visual" style="background-color: #0d6efd; border: 2px solid #198754;">
        <p style="font-size:12px; color:#fff; font-weight:bold; margin:0 0 5px 0;">⭕️ 良い例（濃い背景に白抜き文字）</p>
        <div class="hcolor-design1-good-contrast2">
          ブランドカラーの青など、濃い背景を敷く時は、思い切って文字色を真っ白（#fff）に抜くのがセオリーです。
        </div>
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-design1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-design1-demo-area {
  display: flex;
  justify-content: center;
}
.hcolor-design1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hcolor-design1-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hcolor-design1-visual {
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪いコントラストのシミュレート */
.hcolor-design1-bad-contrast1 {
  font-size: 14px;
  color: #adb5bd; /* 非常に薄いグレー */
  line-height: 1.6;
}
.hcolor-design1-bad-contrast2 {
  font-size: 14px;
  color: #6c757d; /* 背景(343a40)に対して暗すぎるグレー */
  line-height: 1.6;
}

/* ⭕️ 良いコントラストのシミュレート */
.hcolor-design1-good-contrast1 {
  font-size: 14px;
  color: #333333; /* 標準的な濃いグレー */
  line-height: 1.6;
}
.hcolor-design1-good-contrast2 {
  font-size: 14px;
  color: #ffffff; /* 完全な白抜き */
  line-height: 1.6;
}

文字サイズ・太字との組み合わせ

文章をデザインする際、文字色を単独で変えることは少なく、たいていは文字の大きさや太字といった要素と組み合わせて「情報の優先度（階層）」を作ります。

強調（アクセント）をつける際のルールは「引き算」です。

  • 太字にするなら、文字サイズは変えず「テーマカラー」をつけるだけで目立ち、上品に仕上がります。
  • 補足情報などを目立たせたくない場合は、色を極端に薄くするのではなく、色はソフトブラックを維持したまま、文字の大きさを1段階下げるだけで、情報としての優先度を下げられます。
📐 色・サイズ・太字による美しい階層化

❌ 悪い例（やりすぎた強調と、読めない注釈）

今すぐ登録で完全無料！お得なチャンス！

※キャンペーン期間は2026年4月末までとなります。期間を過ぎると通常料金が発生します。

⭕️ 良い例（上品な強調と、優先度を下げた注釈）

今すぐ登録で完全無料！お得なチャンス！

※キャンペーン期間は2026年4月末までとなります。期間を過ぎると通常料金が発生します。

/* ⭕️ 上品な強調（サイズはそのまま、太字と色だけ） */
.good-accent {
  color: #d63384; /* アクセントカラー */
  font-weight: bold; /* 太字にする */
  /* font-sizeは書かない（周りと同じ大きさを維持） */
}

/* ⭕️ 優先度を下げる注釈（色は濃いめに残し、サイズを下げる） */
.good-sub {
  font-size: 0.875rem; /* 少し小さくする */
  color: #6c757d; /* 読める程度のグレー */
}

※「読ませたい文章は、やりすぎない」「読ませたくない文章でも、読める最低ラインは死守する」のがWebデザインの基本です。

HTMLコード表示
<div class="hcolor-design2-wrapper">
  
  <div class="hcolor-design2-demo-area">
    
    <div class="hcolor-design2-box">
      <div class="hcolor-design2-label">📐 色・サイズ・太字による美しい階層化</div>
      
      <div class="hcolor-design2-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例（やりすぎた強調と、読めない注釈）</p>
        <div class="hcolor-design2-bad-group">
          <p class="hcolor-design2-bad-main">
            今すぐ登録で<span class="hcolor-design2-bad-spam">完全無料！</span>お得なチャンス！
          </p>
          <p class="hcolor-design2-bad-sub">※キャンペーン期間は2026年4月末までとなります。期間を過ぎると通常料金が発生します。</p>
        </div>
      </div>

      <div class="hcolor-design2-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 5px 0;">⭕️ 良い例（上品な強調と、優先度を下げた注釈）</p>
        <div class="hcolor-design2-good-group">
          <p class="hcolor-design2-good-main">
            今すぐ登録で<span class="hcolor-design2-good-accent">完全無料！</span>お得なチャンス！
          </p>
          <p class="hcolor-design2-good-sub">※キャンペーン期間は2026年4月末までとなります。期間を過ぎると通常料金が発生します。</p>
        </div>
      </div>

      <div class="hcolor-design2-code">
        /* ⭕️ 上品な強調（サイズはそのまま、太字と色だけ） */<br>
        <span class="hcolor-design2-hl-green">.good-accent</span> {<br>
          <span class="hcolor-design2-hl-blue">color: #d63384;</span>     /* アクセントカラー */<br>
          <span class="hcolor-design2-hl-blue">font-weight: bold;</span>  /* 太字にする */<br>
          /* font-sizeは書かない（周りと同じ大きさを維持） */<br>
        }<br><br>
        /* ⭕️ 優先度を下げる注釈（色は濃いめに残し、サイズを下げる） */<br>
        <span class="hcolor-design2-hl-green">.good-sub</span> {<br>
          <span class="hcolor-design2-hl-blue">font-size: 0.875rem;</span> /* 少し小さくする */<br>
          <span class="hcolor-design2-hl-blue">color: #6c757d;</span>      /* 読める程度のグレー */<br>
        }
      </div>
      <p class="hcolor-design2-note">※「読ませたい文章は、やりすぎない」「読ませたくない文章でも、読める最低ラインは死守する」のがWebデザインの基本です。</p>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-design2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-design2-demo-area {
  display: flex;
  justify-content: center;
}
.hcolor-design2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hcolor-design2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hcolor-design2-visual {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #ced4da;
}

/* ❌ 悪い例のスタイル */
.hcolor-design2-bad-main {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 10px 0;
}
.hcolor-design2-bad-spam {
  font-size: 28px; /* 巨大化 */
  color: red; /* 原色の赤 */
  font-weight: bold; /* 太字 */
  text-decoration: underline;
  /* 全部乗せで安っぽくなる */
}
.hcolor-design2-bad-sub {
  font-size: 10px; /* 極小 */
  color: #ced4da; /* 極薄 */
  margin: 0;
  line-height: 1.4;
  /* コントラスト不足でほぼ読めない */
}

/* ⭕️ 良い例のスタイル */
.hcolor-design2-good-main {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 10px 0;
}
.hcolor-design2-good-accent {
  color: #d63384; /* 上品なピンク */
  font-weight: bold; /* 太字 */
  /* ★サイズはそのまま維持する */
}
.hcolor-design2-good-sub {
  font-size: 14px; /* 1段階小さくする(0.875rem相当) */
  color: #6c757d; /* 読める程度のグレー */
  margin: 0;
  line-height: 1.5;
}

.hcolor-design2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.hcolor-design2-hl-green { color: #98c379; font-weight: bold; }
.hcolor-design2-hl-blue { color: #61afef; font-weight: bold; }
.hcolor-design2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

フォントサイズの指定を詳しく知りたい人は「【HTML】フォントサイズ（文字）の指定：px・rem・em・%の変更と自動調整」を一読ください。

【HTML】フォントサイズ（文字）の指定：px・rem・em・%の変更と自動調整

文字色が変わらない・反映されない時の原因と対策

文字色が変わらない原因のほとんどは「ブラウザの仕様」か「CSSの優先順位」のどちらかに絞られます。

ここでは、CSSの優先順位について解説します。

というのも、ほとんどのケースで「記述ミス」か「CSSの優先順位負け」が原因です。

まずはスペルミスがないか（コロンやセミコロンの抜け、#の抜け）を確認します。

それでも直らない場合は、ブラウザのデベロッパーツール（F12キーまたは右クリックから「検証」）を開きます。

自分が書いたcolorの指定に取り消し線が引かれていれば「優先順位負け」が確定です。

その取り消し線の上にある「勝っているCSS」のセレクタを確認し、同等か少しだけ強いセレクタ（例：親のクラスやタグを書き足す）にして上書きするのが解決手順です。

❌ 悪い例（効かない原因トップ2）

#の付け忘れで無効になった文字

IDの強さに負けて色が変わらない文字

/* ⚠️ 1. ハッシュ(#)の付け忘れ */
.text { color: d63384; } /* 無効化される */

/* ⚠️ 2. 優先順位（詳細度）で負けている */
/* ※裏側で #main p { color: #333; } が効いている場合 */
.text { color: #d63384; } /* クラスだけだと負ける */
⭕️ 良い例（正しい記述と詳細度アップ）

#をつけて正しく反映された文字

親を含めて指定し、優先順位に勝った文字

/* 💡 1. 16進数の前には必ず # をつける */
.text { color: #d63384; }

/* 💡 2. 相手より強いセレクタ（親要素を追加など）で書く */
#main .text {
  color: #d63384; /* これなら打ち勝てる！ */
}
HTMLコード表示
<div class="hcolor-trouble2-wrapper">
  
  <div class="hcolor-trouble2-demo-area">
    
    <div class="hcolor-trouble2-box">
      <div class="hcolor-trouble2-label" style="color:#dc3545;">❌ 悪い例（効かない原因トップ2）</div>
      
      <div class="hcolor-trouble2-visual" id="hcolor-trouble2-mock-parent">
        <p class="hcolor-trouble2-bad-typo">#の付け忘れで無効になった文字</p>
        <p class="hcolor-trouble2-bad-priority">IDの強さに負けて色が変わらない文字</p>
      </div>

      <div class="hcolor-trouble2-code hcolor-trouble2-code-bad">
        /* ⚠️ 1. ハッシュ(#)の付け忘れ */<br>
        <span class="hcolor-trouble2-hl-red">.text</span> { color: d63384; } /* 無効化される */<br><br>
        /* ⚠️ 2. 優先順位（詳細度）で負けている */<br>
        /* ※裏側で #main p { color: #333; } が効いている場合 */<br>
        <span class="hcolor-trouble2-hl-red">.text</span> { color: #d63384; } /* クラスだけだと負ける */
      </div>
    </div>

    <div class="hcolor-trouble2-box">
      <div class="hcolor-trouble2-label" style="color:#198754;">⭕️ 良い例（正しい記述と詳細度アップ）</div>
      
      <div class="hcolor-trouble2-visual" id="hcolor-trouble2-mock-parent2">
        <p class="hcolor-trouble2-good-typo">#をつけて正しく反映された文字</p>
        <p class="hcolor-trouble2-good-priority">親を含めて指定し、優先順位に勝った文字</p>
      </div>

      <div class="hcolor-trouble2-code hcolor-trouble2-code-good">
        /* 💡 1. 16進数の前には必ず # をつける */<br>
        <span class="hcolor-trouble2-hl-green">.text</span> { color: <span class="hcolor-trouble2-hl-blue">#d63384</span>; }<br><br>
        /* 💡 2. 相手より強いセレクタ（親要素を追加など）で書く */<br>
        <span class="hcolor-trouble2-hl-green">#main .text</span> {<br>
          color: <span class="hcolor-trouble2-hl-blue">#d63384</span>; /* これなら打ち勝てる！ */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hcolor-trouble2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcolor-trouble2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hcolor-trouble2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hcolor-trouble2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hcolor-trouble2-visual {
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}
.hcolor-trouble2-visual p {
  font-size: 14px;
  margin: 0 0 10px 0;
  font-weight: bold;
}
.hcolor-trouble2-visual p:last-child {
  margin-bottom: 0;
}

/* ❌ 悪い例のシミュレート */
.hcolor-trouble2-bad-typo {
  /* color: d63384; 実際には効かないためデフォルト色になる */
  color: #333;
}
#hcolor-trouble2-mock-parent p.hcolor-trouble2-bad-priority {
  color: #333; /* 強い指定が裏にある想定 */
}

/* ⭕️ 良い例のシミュレート */
.hcolor-trouble2-good-typo {
  color: #d63384; /* #をつけて正しく効いている */
}
#hcolor-trouble2-mock-parent2 p.hcolor-trouble2-good-priority {
  color: #d63384; /* セレクタを強くして上書き成功した想定 */
}

.hcolor-trouble2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hcolor-trouble2-code-bad { border-left: 4px solid #dc3545; }
.hcolor-trouble2-code-good { border-left: 4px solid #198754; }
.hcolor-trouble2-hl-red { color: #e06c75; font-weight: bold; }
.hcolor-trouble2-hl-green { color: #98c379; font-weight: bold; }
.hcolor-trouble2-hl-blue { color: #61afef; font-weight: bold; }

CSSの優先順位（詳細度）を詳しく知りたい人は「CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述」を一読ください。

CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本の書き方
    非推奨の<font>タグやstyle直書きは避け、クラスを付与して外部CSSで一元管理する。
  • 部分的な変更
    文章の一部だけ色を変える際は、前後で改行されないインライン要素の<span>タグを使用する。
  • カラーコード
    実務の本番環境ではカラーネームは使わず、「16進数（#d63384など）」を標準とする。
  • 本文の基本色
    真っ黒（#000000）は目が疲れるため避け、ソフトブラック（#333333など）を指定する。
  • リンク（aタグ）
    親要素の色設定を引き継がない仕様のため、タグ自体を直接狙って色を指定する。
  • フォーム要素
    ボタンやセレクトボックスも親の色を引き継がないため、直接指定するかcolor: inherit;を活用する。
  • テーブル（表）
    <table>全体ではなく、<th>や<td>に対して個別に指定してメリハリをつける。
  • コントラスト
    背景色と文字色の明暗差（コントラスト比）を確保し、全ての環境で読める設計にする。
  • 強調のルール
    サイズ拡大・太字・赤色などの「全部乗せ」は避け、太字と色のみなど引き算を意識する。
  • 効かない時の対策
    #の抜けがないか確認し、デベロッパーツールを開いて「CSSの優先順位（詳細度）負け」を特定する。

よくある質問（FAQ）

HTMLタグだけで文字色を変えることはできますか？

かつては<font color="red">といった専用タグが使われていましたが、現在のHTML規格（HTML5）では完全に廃止（非推奨）となっています。

現在の正しい書き方は、HTMLタグには<p class="text-red">のようにクラス名をつけ、見た目の装飾は外部のCSSファイルでcolor: red;のように指定して管理する方法です。

文章の一部だけ文字色を変えるにはどのタグを使えばいいですか？

文章の一部だけ色を変えたい場合は、<span>タグを使用します。

初心者が<div>や<p>タグで囲んで一部の色を変えようとしますが、これらのタグは「ブロック要素」と呼ばれるため、前後で改行が入って文章のレイアウトが崩れます。

行の中に綺麗に収まる「インライン要素」の<span>タグを使いましょう。

リンク（aタグ）の文字色が青色から変わりません。なぜですか？

<a>タグ（リンク）が持つ「親の文字色を引き継がない」という特殊な仕様が原因です。

親要素である<div>などに文字色を指定しても、中にあるリンクテキストはブラウザ標準の「青色」のままになります。

リンクの色を変えたい場合は、CSSでa { color: #好きな色; }のように、<a>タグそのものを狙って色を指定する必要があります。

「red」などの色の名前と「#」から始まるコードの違いは何ですか？

redやblueなどの色の名前（カラーネーム）は直感的でテスト時には便利ですが、キツい原色になるためサイトのデザインから浮いてしまいます。

一方、#dc3545のような16進数（カラーコード）を使えば、何百万色の中から「少しくすんだ赤」など、デザイナーが意図した色をどんな環境でも再現できます。

そのため、実務のWebサイトでは16進数が使用されます。

CSSでcolorを指定したはずなのに、色が反映されない時の原因は？

ほとんどの場合、「CSSの優先順位で負けている」か「単純な記述ミス」のどちらかです。

例えば、カラーコードの先頭の「#（ハッシュ）」を付け忘れるだけで、指定は無効化されます。

記述が合っている場合は、WordPressのテーマなどが持っている元々のCSS（ID指定など）の方が強くて、自分の指定が打ち消されている可能性が高いです。

ブラウザのデベロッパーツール（検証）を開き、自分の書いたCSSに取り消し線が引かれていないか確認しましょう。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次