MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】カラーコードの指定方法：文字色・背景色・透過やツール

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

HTML&CSS
html-color

Webサイトのデザインにおいて、文字や背景の「色（カラー）」を正しく指定・管理することはユーザーの可読性とサイトの印象を左右します。

本記事では、HTML/CSSを用いた色の指定方法から、初心者が陥りやすい配色のNG例や実務で役立つカラーツールの活用法まで解説します。

目次

HTMLの色の指定方法

Web制作において、文字色や背景色を設定する「htmlにおけるcolor語法（記法）」や「htmlにおけるcolor指定」を解説します。

HTMLの要素に対して色をつける場合、Web標準はHTML属性に直接書くのではなく、CSSのcolor（文字色）やbackground-color（背景色）プロパティを指定します。

色の表現方法は、主に「16進数（Hex）」「カラーネーム」「RGB（RGBA）」の3種類が存在し、用途に応じて使い分ける必要があります。

HTMLの色の指定方法
  • カラーコード（16進数・Hex）の指定
  • カラーネーム（英語名）の指定
  • RGB・RGBAで透明度（透過）を指定

カラーコード（16進数・Hex）の指定

セレクタ { background-color: #0d6efd; }

実務においてよく使用されるのが16進数によるカラーコードです。

#（ハッシュ）から始まり、0〜9の数字とA〜Fのアルファベットを組み合わせた6桁の文字列で色を表現します。

初心者が陥るミスとして、先頭の#を付け忘れることや文字数の不足・過多（5桁や7桁）が挙げられます。

#が抜けたり桁数が誤ってたりすると、ブラウザは無効な値として色を反映させません。

background-color: 0d6efd; (色が反映されない)
background-color: #0d6efd; (色が正しく反映される)
HTMLコード表示
<div class="hc1-wrapper">
  <input type="radio" name="hc1-state" id="hc1-bad" class="hc1-radio" checked>
  <input type="radio" name="hc1-state" id="hc1-good" class="hc1-radio">

  <div class="hc1-controls">
    <label for="hc1-bad" class="hc1-btn">#なし (無効)</label>
    <label for="hc1-good" class="hc1-btn">#あり (有効)</label>
  </div>

  <div class="hc1-demo-area">
    <div class="hc1-box target-bad-hc1">
      background-color: 0d6efd;
      (色が反映されない)
    </div>
    <div class="hc1-box target-good-hc1">
      background-color: #0d6efd;
      (色が正しく反映される)
    </div>
  </div>
</div>
CSSコード表示
.hc1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hc1-radio {
  display: none;
}

.hc1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hc1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#hc1-bad:checked ~ .hc1-controls [for="hc1-bad"] {
  background-color: #dc3545;
  color: white;
}

#hc1-good:checked ~ .hc1-controls [for="hc1-good"] {
  background-color: #198754;
  color: white;
}

.hc1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.hc1-box {
  width: 100%;
  max-width: 300px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  font-size: 14px;
  text-align: center;
  font-family: monospace;
}

/* ❌ NG：#が抜けているため、プロパティとして無効になる */
#hc1-bad:checked ~ .hc1-demo-area .target-bad-hc1 {
  display: block;
}
#hc1-good:checked ~ .hc1-demo-area .target-bad-hc1 {
  display: none;
}

/* ⭕️ OK：#を含む正しい6桁の16進数指定 */
#hc1-good:checked ~ .hc1-demo-area .target-good-hc1 {
  display: block;
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}
#hc1-bad:checked ~ .hc1-demo-area .target-good-hc1 {
  display: none;
}

カラーネーム（英語名）の指定

カラーネームは、予めブラウザに定義されてる色の英語名を直接記述する方法です。

red、blue、black、tomatoやskyblueといった具体的な名前まで現在140種類以上のキーワードがサポートされています。

初心者は分かりやすさからカラーネームを多用しがちですが、実務の本番環境においてカラーネームを使用することは原則としてありません。

ブランドカラーやデザインカンプの指定色は厳密な数値で管理されるため、定義済みの英語名では完全に一致させることが不可能なためです。

background-color: tomato; (ブラウザ定義の標準色)
background-color: #e25822; (デザイン指定の厳密な色)
HTMLコード表示
<div class="hc2-wrapper">
  <input type="radio" name="hc2-state" id="hc2-name" class="hc2-radio" checked>
  <input type="radio" name="hc2-state" id="hc2-hex" class="hc2-radio">

  <div class="hc2-controls">
    <label for="hc2-name" class="hc2-btn">カラーネーム (テスト用)</label>
    <label for="hc2-hex" class="hc2-btn">16進数Hex (本番用)</label>
  </div>

  <div class="hc2-demo-area">
    <div class="hc2-box target-name-hc2">
      background-color: tomato;
      (ブラウザ定義の標準色)
    </div>
    <div class="hc2-box target-hex-hc2">
      background-color: #e25822;
      (デザイン指定の厳密な色)
    </div>
  </div>
</div>
CSSコード表示
.hc2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hc2-radio {
  display: none;
}

.hc2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hc2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#hc2-name:checked ~ .hc2-controls [for="hc2-name"] {
  background-color: tomato;
  color: white;
}

#hc2-hex:checked ~ .hc2-controls [for="hc2-hex"] {
  background-color: #e25822;
  color: white;
}

.hc2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.hc2-box {
  width: 100%;
  max-width: 300px;
  padding: 20px;
  font-size: 14px;
  text-align: center;
  font-family: monospace;
  color: white;
  border-radius: 4px;
}

/* テスト用途：カラーネームによる指定 */
#hc2-name:checked ~ .hc2-demo-area .target-name-hc2 {
  display: block;
  background-color: tomato; 
}
#hc2-name:checked ~ .hc2-demo-area .target-hex-hc2 {
  display: none;
}

/* 本番用途：16進数による厳密な指定 */
#hc2-hex:checked ~ .hc2-demo-area .target-hex-hc2 {
  display: block;
  background-color: #e25822;
}
#hc2-hex:checked ~ .hc2-demo-area .target-name-hc2 {
  display: none;
}

RGB・RGBAで透明度（透過）を指定

RGBは、光の三原色である赤（Red）、緑（Green）、青（Blue）をそれぞれ0〜255の数値で指定する方法です。

また、透明度を追加したのがRGBAです。

要素を半透明にする際、初心者は要素全体に対する透明度プロパティopacityを使用するミスを起こします。

opacity: 0.5;を親要素に指定すると、背景色だけでなく中に含まれるテキストや画像まで全て半透明になってしまいます。

テキストの可読性を維持したまま背景色「だけ」を半透明にしたい場合は、opacityではなく背景色に対して rgba()を使用して透過させるのがルールです。

テキストまで薄くなり
可読性が低下します。

背景のみが透過し
テキストは明瞭です。

HTMLコード表示
<div class="hc3-wrapper">
  <input type="radio" name="hc3-state" id="hc3-opacity" class="hc3-radio" checked>
  <input type="radio" name="hc3-state" id="hc3-rgba" class="hc3-radio">

  <div class="hc3-controls">
    <label for="hc3-opacity" class="hc3-btn">opacity使用 (文字も透過する)</label>
    <label for="hc3-rgba" class="hc3-btn">rgba使用 (背景のみ透過する)</label>
  </div>

  <div class="hc3-demo-area">
    <div class="hc3-bg-pattern">
      <div class="hc3-box target-opacity-hc3">
        <p class="hc3-text">テキストまで薄くなり<br>可読性が低下します。</p>
      </div>
      <div class="hc3-box target-rgba-hc3">
        <p class="hc3-text">背景のみが透過し<br>テキストは明瞭です。</p>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hc3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hc3-radio {
  display: none;
}

.hc3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hc3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#hc3-opacity:checked ~ .hc3-controls [for="hc3-opacity"] {
  background-color: #dc3545;
  color: white;
}

#hc3-rgba:checked ~ .hc3-controls [for="hc3-rgba"] {
  background-color: #198754;
  color: white;
}

.hc3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

/* 透過を視覚化するための背景パターン */
.hc3-bg-pattern {
  width: 100%;
  max-width: 400px;
  padding: 40px 20px;
  background-image: 
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  display: flex;
  justify-content: center;
  border-radius: 4px;
}

.hc3-box {
  width: 100%;
  max-width: 250px;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

.hc3-text {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: #000000; /* テキスト自体は黒を指定 */
  line-height: 1.5;
}

/* ❌ opacityの失敗：要素全体が透過するため、中の黒いテキストも半透明のグレーになる */
#hc3-opacity:checked ~ .hc3-demo-area .target-opacity-hc3 {
  display: block;
  background-color: #0d6efd;
  opacity: 0.4;
}
#hc3-opacity:checked ~ .hc3-demo-area .target-rgba-hc3 {
  display: none;
}

/* ⭕️ rgbaの成功：背景色のみアルファ値（0.4）を持たせるため、テキストの黒は100%のまま維持される */
#hc3-rgba:checked ~ .hc3-demo-area .target-rgba-hc3 {
  display: block;
  background-color: rgba(13, 110, 253, 0.4);
}
#hc3-rgba:checked ~ .hc3-demo-area .target-opacity-hc3 {
  display: none;
}

文字色（テキストカラー）を変える方法

セレクタ { color: カラーコード or カラーネーム or RGBA; }

Web制作において、テキストの色を変更する場合は、HTML内に直接スタイルを書き込むのではなくCSSを利用して装飾を分離するのがよいです。

文字色（テキストカラー）を変える方法
  • CSSを使った文字色の変更
  • 特定の文字だけ色を変える（span）

文字装飾に利用するプロパティを詳しく知りたい人は「【html&css】文字装飾に関するWebデザインまとめ」を一読ください。

【html&css】文字装飾に関するWebデザインまとめ

CSSを使った文字色の変更

CSSを使用して文字色を変更するには、対象となるHTMLタグに対してcolorプロパティを使用します。

背景色を変更するbackground-colorと対になる頻度の高いプロパティの一つです。

初心者がよくやるミスが「font-colorやtext-colorという存在しないプロパティを記述する」ことです。

文字サイズを変えるのがfont-size、太さを変えるのがfont-weightであるため、font-colorと書いてしまいがちですが、文字色を変更するプロパティはcolorのみです。

誤ったプロパティ名を書くとブラウザは無視して色は変わりません。

プロパティ名が間違っているため、
文字色はデフォルトの黒のままです。

正しいプロパティを使用しているため、
文字色が青色に変わっています。

HTMLコード表示
<div class="hcf1-wrapper">
  <input type="radio" name="hcf1-state" id="hcf1-bad" class="hcf1-radio" checked>
  <input type="radio" name="hcf1-state" id="hcf1-good" class="hcf1-radio">

  <div class="hcf1-controls">
    <label for="hcf1-bad" class="hcf1-btn">❌ font-color (無効)</label>
    <label for="hcf1-good" class="hcf1-btn">⭕️ color (有効)</label>
  </div>

  <div class="hcf1-demo-area">
    <div class="hcf1-box">
      <p class="hcf1-text target-bad-hcf1">
        プロパティ名が間違っているため、<br>文字色はデフォルトの黒のままです。
      </p>
      <p class="hcf1-text target-good-hcf1">
        正しいプロパティを使用しているため、<br>文字色が青色に変わっています。
      </p>
    </div>
  </div>
</div>
CSSコード表示
.hcf1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hcf1-radio {
  display: none;
}

.hcf1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hcf1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#hcf1-bad:checked ~ .hcf1-controls [for="hcf1-bad"] {
  background-color: #dc3545;
  color: white;
}

#hcf1-good:checked ~ .hcf1-controls [for="hcf1-good"] {
  background-color: #0d6efd;
  color: white;
}

.hcf1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.hcf1-box {
  width: 100%;
  max-width: 350px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}

.hcf1-text {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  margin: 0;
}

/* ❌ NG：存在しないプロパティ（font-color）を指定した状態の再現 */
#hcf1-bad:checked ~ .hcf1-demo-area .target-bad-hcf1 {
  display: block;
  /* font-color: #0d6efd; 実際には効かないためデフォルト色になる */
  color: #333; 
}

#hcf1-bad:checked ~ .hcf1-demo-area .target-good-hcf1 {
  display: none;
}

/* ⭕️ OK：正しいプロパティ（color）を指定した状態 */
#hcf1-good:checked ~ .hcf1-demo-area .target-good-hcf1 {
  display: block;
  color: #0d6efd; /* 正しく青色が適用される */
}

#hcf1-good:checked ~ .hcf1-demo-area .target-bad-hcf1 {
  display: none;
}

特定の文字だけ色を変える（span）

見出しや段落全体の文字色を一括で変えるのではなく、文章中の特定の単語や強調したい部分だけ色を変えたい場合があります。

部分的な装飾は、<span>タグを使用するのが基本です。

<span>タグは何の意味やデザインもありませんが、特定の範囲をグループ化し、CSSクラスを付与して色を指定するインライン要素の目印として活躍します。

部分的に色を変えようとした初心者が起こすレイアウト崩れが<span>（インライン要素）の代わりに<div>や<p>（ブロック要素）で文字を囲んでしまうというミスです。

<div>を使って部分的な装飾を行うとすると、ブロック要素の仕様によって前後で強制的に改行が発生し、文章が分断されます。

文章の途中で色を変える場合は、改行を伴わない<span>を使うことを徹底しましょう。

期間限定の
特別キャンペーン
を実施中です。
期間限定の特別キャンペーンを実施中です。
HTMLコード表示
<div class="hcf2-wrapper">
  <input type="radio" name="hcf2-state" id="hcf2-div" class="hcf2-radio" checked>
  <input type="radio" name="hcf2-state" id="hcf2-span" class="hcf2-radio">

  <div class="hcf2-controls">
    <label for="hcf2-div" class="hcf2-btn">❌ divで囲む (改行される)</label>
    <label for="hcf2-span" class="hcf2-btn">⭕️ spanで囲む (一行に収まる)</label>
  </div>

  <div class="hcf2-demo-area">
    <div class="hcf2-box">
      
      <div class="hcf2-sentence target-bad-hcf2">
        期間限定の<div class="hcf2-highlight">特別キャンペーン</div>を実施中です。
      </div>

      <div class="hcf2-sentence target-good-hcf2">
        期間限定の<span class="hcf2-highlight">特別キャンペーン</span>を実施中です。
      </div>

    </div>
  </div>
</div>
CSSコード表示
.hcf2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hcf2-radio {
  display: none;
}

.hcf2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hcf2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#hcf2-div:checked ~ .hcf2-controls [for="hcf2-div"] {
  background-color: #dc3545;
  color: white;
}

#hcf2-span:checked ~ .hcf2-controls [for="hcf2-span"] {
  background-color: #198754;
  color: white;
}

.hcf2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.hcf2-box {
  width: 100%;
  max-width: 380px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* 部分的に色を変えるためのCSSクラス */
.hcf2-highlight {
  color: #dc3545; /* 赤色に指定 */
  font-weight: bold;
}

/* 表示の切り替え */
#hcf2-div:checked ~ .hcf2-demo-area .target-bad-hcf2 {
  display: block;
}
#hcf2-div:checked ~ .hcf2-demo-area .target-good-hcf2 {
  display: none;
}

#hcf2-span:checked ~ .hcf2-demo-area .target-good-hcf2 {
  display: block;
}
#hcf2-span:checked ~ .hcf2-demo-area .target-bad-hcf2 {
  display: none;
}

背景色（background）を変える方法

セレクタ { background-color: カラーコード or カラーネーム or RGBA; }

Webサイトのデザインにおいて、要素の背景色の変更はサイトの印象を決定づける役割を担います。

要素ごとに背景色を変更するには、CSSのbackground-colorプロパティと専用のカラーコードを使用します。

背景色（background）を変える方法
  • ページ全体や一部（div・表）の背景色を変更
  • 背景を透明（none）にする

ページ全体や一部（div・表）の背景色を変更

Webページ全体の背景色や特定のブロック要素、あるいは表（テーブル）のデザインを整える際もCSSのbackground-color プロパティを使用します。

実務において、初心者ミスでdivなどのブロック要素に背景色をつけた際、文字が枠線（背景の端）にピッタリとくっついてしまい、非常に窮屈に見えてしまうという問題です。

背景色を指定してボックスを目立たせる場合、内側の余白であるpaddingプロパティをセットで指定し、テキストが読みやすくなる空間を確保する必要があります。

【重要なお知らせ】
背景色をつける際は、必ず内側の余白（padding）を確保してください。余白がないとテキストが端に寄りすぎてしまい、視認性が大きく低下します。
【重要なお知らせ】
背景色をつける際は、必ず内側の余白（padding）を確保してください。余白がないとテキストが端に寄りすぎてしまい、視認性が大きく低下します。
HTMLコード表示
<div class="hbg1-wrapper">
  <input type="radio" name="hbg1-state" id="hbg1-bad" class="hbg1-radio" checked>
  <input type="radio" name="hbg1-state" id="hbg1-good" class="hbg1-radio">

  <div class="hbg1-controls">
    <label for="hbg1-bad" class="hbg1-btn">❌ 余白なし (窮屈で読みにくい)</label>
    <label for="hbg1-good" class="hbg1-btn">⭕️ 余白あり (読みやすい)</label>
  </div>

  <div class="hbg1-demo-area">
    <div class="target-bad-hbg1">
      <div class="hbg1-box-ng">
        【重要なお知らせ】<br>
        背景色をつける際は、必ず内側の余白（padding）を確保してください。余白がないとテキストが端に寄りすぎてしまい、視認性が大きく低下します。
      </div>
    </div>

    <div class="target-good-hbg1">
      <div class="hbg1-box-ok">
        【重要なお知らせ】<br>
        背景色をつける際は、必ず内側の余白（padding）を確保してください。余白がないとテキストが端に寄りすぎてしまい、視認性が大きく低下します。
      </div>
    </div>
  </div>
</div>
CSSコード表示
.hbg1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbg1-radio {
  display: none;
}
.hbg1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hbg1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hbg1-bad:checked ~ .hbg1-controls [for="hbg1-bad"] {
  background-color: #dc3545;
  color: white;
}
#hbg1-good:checked ~ .hbg1-controls [for="hbg1-good"] {
  background-color: #198754;
  color: white;
}
.hbg1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

/* NG用のボックススタイル（余白ゼロ） */
.hbg1-box-ng {
  background-color: #fff3cd; /* 背景色の指定 */
  color: #856404;
  width: 100%;
  max-width: 350px;
  font-size: 14px;
  line-height: 1.6;
  padding: 0; /* ★ここがミス：余白がない */
}

/* OK用のボックススタイル（適切な余白） */
.hbg1-box-ok {
  background-color: #d1e7dd; /* 背景色の指定 */
  color: #0f5132;
  width: 100%;
  max-width: 350px;
  font-size: 14px;
  line-height: 1.6;
  padding: 20px; /* ★正解：十分な余白を確保 */
  border-radius: 4px;
}

.target-good-hbg1 {
  display: none;
}
#hbg1-good:checked ~ .hbg1-demo-area .target-bad-hbg1 {
  display: none;
}
#hbg1-good:checked ~ .hbg1-demo-area .target-good-hbg1 {
  display: block;
}

背景を透明（none）にする

要素に設定されている背景色を消して、親要素の背景（画像や色）を透かして見せたい場合があります。

このとき、初心者がよくやってしまう構文エラーが「background-color: none;と記述してしまうこと」です。

CSSにおいて、noneは「ボーダー（線）を消す（border: none;）」や「要素を非表示にする（display: none;）」際に使われるため、背景色もnoneで消せると勘違いされがちです。

しかし、background-colorプロパティに対してnoneという値は存在しません。

背景色を透明に打ち消す正しい値はtransparent（透明）です。

background-color: none;

無効な値のため、
背景が透けません。

background-color: transparent;

正しい値のため、
後ろの柄が透けて見えます。
HTMLコード表示
<div class="hbg2-wrapper">
  <input type="radio" name="hbg2-state" id="hbg2-bad" class="hbg2-radio" checked>
  <input type="radio" name="hbg2-state" id="hbg2-good" class="hbg2-radio">

  <div class="hbg2-controls">
    <label for="hbg2-bad" class="hbg2-btn">❌ none (構文エラー・白のまま)</label>
    <label for="hbg2-good" class="hbg2-btn">⭕️ transparent (正しく透明になる)</label>
  </div>

  <div class="hbg2-demo-area">
    <div class="hbg2-parent-pattern">
      
      <div class="hbg2-box target-bad-hbg2">
        <p>background-color: none;</p>
        <span>無効な値のため、<br>背景が透けません。</span>
      </div>

      <div class="hbg2-box target-good-hbg2">
        <p>background-color: transparent;</p>
        <span>正しい値のため、<br>後ろの柄が透けて見えます。</span>
      </div>

    </div>
  </div>
</div>
CSSコード表示
.hbg2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbg2-radio {
  display: none;
}
.hbg2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hbg2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hbg2-bad:checked ~ .hbg2-controls [for="hbg2-bad"] {
  background-color: #dc3545;
  color: white;
}
#hbg2-good:checked ~ .hbg2-controls [for="hbg2-good"] {
  background-color: #198754;
  color: white;
}
.hbg2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

/* 親要素のストライプ背景 */
.hbg2-parent-pattern {
  width: 100%;
  max-width: 400px;
  padding: 40px 20px;
  background-color: #e9ecef;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ced4da 10px,
    #ced4da 20px
  );
  border-radius: 4px;
  display: flex;
  justify-content: center;
}

/* 子要素のボックス（デフォルトは白背景を想定） */
.hbg2-box {
  width: 100%;
  max-width: 250px;
  background-color: #ffffff; /* SWELL等のデフォルト背景色を想定 */
  padding: 20px;
  text-align: center;
  border: 2px solid #333;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.hbg2-box p {
  font-family: monospace;
  font-size: 15px;
  margin: 0 0 10px 0;
  color: #dc3545;
}

/* ❌ NG：noneは無効な値。本来の白背景がそのまま表示される */
.target-bad-hbg2 {
  /* background-color: none;  実際にはエラーで無視される */
}

/* ⭕️ OK：transparentを指定することで確実に透明化させる */
.target-good-hbg2 {
  background-color: transparent !important;
}
.target-good-hbg2 p {
  color: #198754;
}

/* 表示の切り替え */
.target-good-hbg2 {
  display: none;
}
#hbg2-good:checked ~ .hbg2-demo-area .target-bad-hbg2 {
  display: none;
}
#hbg2-good:checked ~ .hbg2-demo-area .target-good-hbg2 {
  display: block;
}

ボタンや枠線・リンクの色の変え方

WebサイトのUIにおいて、ユーザーがクリック・操作する要素の色設定は、使いやすさに直結する重要なポイントです。

特定のボックスを強調する枠線の色を変更する場合は、CSSのborder-colorプロパティを使用します。

ボタンや枠線・リンクの色の変え方
  • ボタンの背景色と文字色
  • リンクの色とホバー（マウスオーバー）時の色

ボタンやリンクで活用する<a>タグの使い方を詳しく知りたい人は「【html&css】リンク<a>タグの使い方とWebデザインによる装飾」を一読ください。

【html&css】リンクタグの使い方とWebデザインによる装飾

ボタンの背景色と文字色

フォームの送信ボタンや購入画面へ誘導するボタンの装飾を行う際は、背景色と文字色をセットで指定します。

背景色はbackground-color、文字色はcolorを使用し、コントラスト（明暗差）をはっきりさせて文字を読みやすくするのが基本です。

<button>タグや<input type="submit">は、ブラウザやOSが標準で用意する「立体的で古いデザインの枠線」が設定されています。

背景色を変えただけでは枠線が残るため、実務ではborder: none;で初期の枠線を消去するかborder: 1px solid #色コード;のように枠線を上書きしてフラットなデザインに整えます。

ブラウザ特有の古い枠線が残っています。

枠線が消え、モダンなデザインになりました。

リンクの色とホバー（マウスオーバー）時の色

HTMLの標準設定は、未訪問リンクは青色で下線が引かれます。

サイトのデザインに合わせて変更し、さらにPCでマウスのカーソルが上に乗った時（ホバー時）に色を変化させることで、ユーザーに「クリックできる場所だ」と直感的に伝えます。

リンクだけでなく、ボタンやセレクトボックスなどにもホバーエフェクトは多用されます。

ホバー時の色を指定するには、CSSの:hover疑似クラスを使用します。

ホバー時の色を設定した初心者のサイトで見られるのが、マウスを乗せた瞬間に「パチッ！」と一瞬で別の色に切り替わってしまう現象です。

間違いではありませんが、少し機械的で安っぽい印象を与えます。

実務でリッチなUIを作る際は、ホバーした時に「フワッ」と滑らかに色が変化し、通常状態のCSSにtransition（トランジション：状態変化の時間）プロパティをセットで記述するのがルールです。

詳細を見る ＞

マウスを乗せると、一瞬で色が切り替わります。

詳細を見る ＞

マウスを乗せると、滑らかに色が変わります。

HTMLコード表示
<div class="hbc2-wrapper">
  <input type="radio" name="hbc2-state" id="hbc2-bad" class="hbc2-radio" checked>
  <input type="radio" name="hbc2-state" id="hbc2-good" class="hbc2-radio">

  <div class="hbc2-controls">
    <label for="hbc2-bad" class="hbc2-btn">❌ transitionなし (パチッ)</label>
    <label for="hbc2-good" class="hbc2-btn">⭕️ transitionあり (フワッ)</label>
  </div>

  <div class="hbc2-demo-area">
    
    <div class="hbc2-box target-bad-hbc2">
      <a href="javascript:void(0);" class="hbc2-link-ng">詳細を見る ＞</a>
      <p class="hbc2-note">マウスを乗せると、一瞬で色が切り替わります。</p>
    </div>

    <div class="hbc2-box target-good-hbc2">
      <a href="javascript:void(0);" class="hbc2-link-ok">詳細を見る ＞</a>
      <p class="hbc2-note">マウスを乗せると、滑らかに色が変わります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hbc2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hbc2-radio {
  display: none;
}

.hbc2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hbc2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s; /* デモのタブボタン自体にもtransitionを入れています */
  font-size: 14px;
}

#hbc2-bad:checked ~ .hbc2-controls [for="hbc2-bad"] {
  background-color: #dc3545;
  color: white;
}

#hbc2-good:checked ~ .hbc2-controls [for="hbc2-good"] {
  background-color: #198754;
  color: white;
}

.hbc2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

.hbc2-box {
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.hbc2-note {
  font-size: 13px;
  color: #666;
  margin-top: 20px;
}

/* リンクボタンの共通スタイル（SWELL等の干渉リセット含む） */
.hbc2-link-ng,
.hbc2-link-ok {
  display: inline-block;
  background-color: #ffffff;
  color: #0d6efd !important;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  padding: 12px 30px;
  border: 2px solid #0d6efd;
  border-radius: 30px;
}

/* ホバー時の共通スタイル（背景を青、文字を白に反転） */
.hbc2-link-ng:hover,
.hbc2-link-ok:hover {
  background-color: #0d6efd;
  color: #ffffff !important;
}

/* ❌ NGスタイル：transitionの指定がないため、0秒でパチッと変わる */
.hbc2-link-ng {
  /* transition指定なし */
}

/* ⭕️ OKスタイル：transitionを指定し、変化の時間を設ける */
.hbc2-link-ok {
  /* 0.3秒かけて、背景色と文字色を滑らかに変化させる魔法の1行 */
  transition: all 0.3s ease; 
}

/* 表示の切り替え */
.target-good-hbc2 {
  display: none;
}
#hbc2-good:checked ~ .hbc2-demo-area .target-bad-hbc2 {
  display: none;
}
#hbc2-good:checked ~ .hbc2-demo-area .target-good-hbc2 {
  display: block;
}

直感的に色を選べる！カラーピッカーと配色ツール

Webデザインにおいて、色を正確なカラーコード（16進数やRGBA）に変換するには、直感的に操作できるツールの活用が不可欠です。

現在では、ブラウザに標準搭載されている機能やWeb上で動作するオンラインツール、ブラウザの拡張機能など、色選びをサポートする様々な手段が存在します。

ここでは、実務で必須となるカラーツールの種類と初心者が色を扱う際に陥りやすいミスについて解説します。

カラーピッカーと配色ツール
  • ブラウザ上で使えるカラーピッカー
  • 画像から色を抽出するツール
  • 配色パレット・ジェネレーターの活用

ブラウザ上で使えるカラーピッカー

色を選択・調整するツールとして手軽なのは、HTML5から導入された<input type="color">タグです。

これを記述するだけで、OSやブラウザに標準搭載されているカラーピッカーを呼び出せます。

また、より詳細な色の調整や視覚的な色相環を使って色を探したい場合は、W3Schoolsなどの学習サイトが提供しているオンラインピッカーや専用のHexピッカーを使用するのが一般的です。

初心者が<input type="color">を実務のWebアプリケーションに組み込む際に見落としがちなのが「ユーザーの環境によって表示されるカラーピッカーの見た目と機能が異なる」という点です。

さらに、現在のHTML5の標準仕様は、「透明度（アルファ値）」の選択をサポートしていません。

透明度を含めたrgbaの値を取得させたい場合は、標準機能に頼るのではなく、JavaScript製のカラーピッカーライブラリ（独自UI）を導入する必要があります。

HTML5 カラーピッカーを体験

ここをクリックして色を選択

現在の色: #0d6efd

HTMLコード表示
<div class="hcp1-wrapper">
  <div class="hcp1-controls">
    <div class="hcp1-btn">HTML5 カラーピッカーを体験</div>
  </div>

  <div class="hcp1-demo-area">
    <div class="hcp1-box" id="hcp1-target">
      <p class="hcp1-text">ここをクリックして色を選択</p>
      <input type="color" id="hcp1-picker" class="hcp1-input" value="#0d6efd">
      <p class="hcp1-hex-display" id="hcp1-display">現在の色: #0d6efd</p>
    </div>
  </div>
</div>
CSSコード表示
.hcp1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcp1-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.hcp1-btn {
  background-color: #198754;
  padding: 10px 15px;
  border-radius: 4px;
  font-weight: bold;
  color: white;
  font-size: 14px;
}
.hcp1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hcp1-box {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 150px;
  background-color: #0d6efd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.2s;
}
.hcp1-text {
  font-weight: bold;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.hcp1-hex-display {
  font-family: monospace;
  font-size: 14px;
  margin: 10px 0 0 0;
  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
  border-radius: 4px;
}
/* input type="color" を透明にしてボックス全体を覆うことで、どこをクリックしてもピッカーが起動するようにする */
.hcp1-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
JavaScriptコード表示
// カラーピッカーの値が変更されたら、背景色とテキストを更新する処理
document.addEventListener('DOMContentLoaded', function() {
  const picker = document.getElementById('hcp1-picker');
  const target = document.getElementById('hcp1-target');
  const display = document.getElementById('hcp1-display');
  
  if(picker && target && display) {
    picker.addEventListener('input', function(e) {
      const selectedColor = e.target.value;
      target.style.backgroundColor = selectedColor;
      display.textContent = '現在の色: ' + selectedColor;
    });
  }
});

画像から色を抽出するツール

参考サイトのスクリーンショットや写真素材から色を直接取得したい場合、スポイトツールが活躍します。

ブラウザの拡張機能や画像をアップロードして色を判別するWebサービスを利用することで、画面上の任意のピクセルから16進数のカラーコードをコピーできます。

実務において、スポイトツールを使った初心者が起こすミスが「取得した色がくすんでいる・濁っている」という問題です。

JPEGなどの画像形式は、ファイルサイズを軽くするために画質を圧縮させています。

目には綺麗な真っ赤に見えていても、スポイトで吸い取った1ピクセルがたまたまノイズ部分だった場合、#ff0000ではなく#fe0205のようなずれたカラーコードを取得してしまいます。

画像から色を抽出した後は、その数値がキリの良いものか確認し、手動で微調整を行うのがよいです。

取得したコード: #fdfcfb

ノイズを拾ったため、完全な白ではなく微妙に濁ったグレーになっています。

補正したコード: #ffffff

数値を綺麗な白（#ffffff）に補正したため、清潔感のある背景になります。
HTMLコード表示
<div class="hcp2-wrapper">
  <input type="radio" name="hcp2-state" id="hcp2-bad" class="hcp2-radio" checked>
  <input type="radio" name="hcp2-state" id="hcp2-good" class="hcp2-radio">

  <div class="hcp2-controls">
    <label for="hcp2-bad" class="hcp2-btn">❌ 画像から抽出したまま (色が濁る)</label>
    <label for="hcp2-good" class="hcp2-btn">⭕️ 数値を補正する (純粋な色)</label>
  </div>

  <div class="hcp2-demo-area">
    
    <div class="hcp2-box target-bad-hcp2">
      <div class="hcp2-color-preview preview-bad"></div>
      <p class="hcp2-text">取得したコード: <span class="hcp2-code">#fdfcfb</span></p>
      <span class="hcp2-note">ノイズを拾ったため、完全な白ではなく微妙に濁ったグレーになっています。</span>
    </div>

    <div class="hcp2-box target-good-hcp2">
      <div class="hcp2-color-preview preview-good"></div>
      <p class="hcp2-text">補正したコード: <span class="hcp2-code">#ffffff</span></p>
      <span class="hcp2-note">数値を綺麗な白（#ffffff）に補正したため、清潔感のある背景になります。</span>
    </div>

  </div>
</div>
CSSコード表示
.hcp2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcp2-radio {
  display: none;
}
.hcp2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hcp2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hcp2-bad:checked ~ .hcp2-controls [for="hcp2-bad"] {
  background-color: #dc3545;
  color: white;
}
#hcp2-good:checked ~ .hcp2-controls [for="hcp2-good"] {
  background-color: #198754;
  color: white;
}
.hcp2-demo-area {
  background-color: #333; /* 濁りが分かりやすいように暗い背景を設定 */
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hcp2-box {
  width: 100%;
  max-width: 300px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
.hcp2-color-preview {
  width: 100%;
  height: 80px;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
}
/* ❌ NG：ノイズで濁った白（ほぼグレー） */
.preview-bad {
  background-color: #fdfcfb;
}
/* ⭕️ OK：純粋な白 */
.preview-good {
  background-color: #ffffff;
}
.hcp2-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
}
.hcp2-code {
  font-family: monospace;
  background-color: #e9ecef;
  padding: 2px 6px;
  border-radius: 4px;
  color: #dc3545;
}
.hcp2-note {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  display: block;
}
/* 表示の切り替え */
.target-good-hcp2 {
  display: none;
}
#hcp2-good:checked ~ .hcp2-demo-area .target-bad-hcp2 {
  display: none;
}
#hcp2-good:checked ~ .hcp2-demo-area .target-good-hcp2 {
  display: block;
}
#hcp2-good:checked ~ .hcp2-demo-area .hcp2-code {
  color: #198754;
}

配色パレット・ジェネレーターの活用

Webサイト全体に統一感を持たせるには、メインカラーに対して相性の良い色を見つける必要があります。

そのため、AIや色彩理論に基づいて最適な組み合わせを提案するカラーパレットジェネレーターや色の組み合わせをチェックするツールが重宝されます。

また、単色ではなくグラデーションを作成できるジェネレーターも、モダンなデザインを作る上で欠かせません。

初心者が陥る深刻なデザインミスは、直感だけで「好きな色」を組み合わせてしまうことです。

ジェネレーターを使わずに適当に色を組み合わせると、背景色と文字色が同化し「文字が読めない（コントラスト比の不足）」というユーザビリティの低下を招きます。

また、1つのページ内に赤、青、緑、黄色と無秩序に色を使いすぎるのもNGです。

実務においては、ジェネレーターを利用して「ベースカラー（70%）」「メインカラー（25%）」「アクセントカラー（5%）」の3色程度に絞り込んで配色するのが基本ルールです。

重要なお知らせ

直感だけで色を選ぶと、明度の差（コントラスト）が不足し、視認性が著しく悪化します。

重要なお知らせ

配色ツールを使用してコントラスト比を計算することで、誰もが読みやすいデザインになります。

HTMLコード表示
<div class="hcp3-wrapper">
  <input type="radio" name="hcp3-state" id="hcp3-bad" class="hcp3-radio" checked>
  <input type="radio" name="hcp3-state" id="hcp3-good" class="hcp3-radio">

  <div class="hcp3-controls">
    <label for="hcp3-bad" class="hcp3-btn">❌ 直感で選んだ配色 (NG)</label>
    <label for="hcp3-good" class="hcp3-btn">⭕️ ツールで計算した配色 (OK)</label>
  </div>

  <div class="hcp3-demo-area">
    
    <div class="hcp3-box target-bad-hcp3">
      <div class="hcp3-title">重要なお知らせ</div>
      <p class="hcp3-text">直感だけで色を選ぶと、明度の差（コントラスト）が不足し、視認性が著しく悪化します。</p>
      <button class="hcp3-action">確認する</button>
    </div>

    <div class="hcp3-box target-good-hcp3">
      <div class="hcp3-title">重要なお知らせ</div>
      <p class="hcp3-text">配色ツールを使用してコントラスト比を計算することで、誰もが読みやすいデザインになります。</p>
      <button class="hcp3-action">確認する</button>
    </div>

  </div>
</div>
CSSコード表示
.hcp3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcp3-radio {
  display: none;
}
.hcp3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hcp3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hcp3-bad:checked ~ .hcp3-controls [for="hcp3-bad"] {
  background-color: #dc3545;
  color: white;
}
#hcp3-good:checked ~ .hcp3-controls [for="hcp3-good"] {
  background-color: #198754;
  color: white;
}
.hcp3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hcp3-box {
  width: 100%;
  max-width: 350px;
  padding: 25px;
  border-radius: 8px;
  text-align: center;
}
.hcp3-title {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: bold;
}
.hcp3-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px 0;
}
.hcp3-action {
  border: none;
  padding: 10px 25px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
}

/* ❌ NG：背景（青緑）と文字（青）とボタン（赤）の無秩序な組み合わせ */
.target-bad-hcp3 {
  background-color: #20c997; /* ベース：青緑 */
}
.target-bad-hcp3 .hcp3-title,
.target-bad-hcp3 .hcp3-text {
  color: #0d6efd; /* 文字：青（コントラストが最悪） */
}
.target-bad-hcp3 .hcp3-action {
  background-color: #dc3545; /* ボタン：赤（目がチカチカする） */
  color: #ffffff;
}

/* ⭕️ OK：ネイビーの背景に白文字、アクセントにゴールドの組み合わせ */
.target-good-hcp3 {
  background-color: #1a252f; /* ベース：暗いネイビー */
}
.target-good-hcp3 .hcp3-title,
.target-good-hcp3 .hcp3-text {
  color: #ffffff; /* 文字：白（コントラストが十分） */
}
.target-good-hcp3 .hcp3-action {
  background-color: #f39c12; /* ボタン：アクセントカラーのゴールド */
  color: #ffffff;
}

/* 表示の切り替え */
.target-good-hcp3 {
  display: none;
}
#hcp3-good:checked ~ .hcp3-demo-area .target-bad-hcp3 {
  display: none;
}
#hcp3-good:checked ~ .hcp3-demo-area .target-good-hcp3 {
  display: block;
}

よく使われる定番カラーコード一覧（見本）

Web制作をスムーズに進めるには、頻繁に使用する定番のカラーコードを一覧としてストックしておくことが重要です。

ここでは、テキストの色や背景色に使える見本を系統別にご紹介します。

定番カラーコード
  • 白・黒・グレー系のカラー
  • 赤・青・緑などの基本カラー
  • おしゃれなパステル・ネオンカラー

白・黒・グレー系のカラー

16進数のカラーコードでは、同じ文字が連続する場合に3桁に省略できるルールがあり、純白の#ffffffや純黒の#000000は、それぞれ#fff、#000と省略して記述されます。

また、グレー系も同様に、濃いグレー#333333、中間グレー#666666、薄いグレー#cccccc、極薄いグレー#eeeeeeといった3桁の連番が実務の現場でよく使われます。

初心者がやってしまうのが純白（#fff）の背景に対して、真っ黒（#000）のテキストを使用してしまうミスです。

白と黒のコントラストが強すぎると「ハレーション」と呼ばれる現象が起き、文字がチカチカしてユーザーの目を疲れさせてしまいます。

実務において、長文テキストに#000を使うことはほぼなく、わずかにグレーがかった#333や#444をテキストカラーでユーザーの目に優しい設計を行いましょう。

目に負担をかける配色

純白の背景に純黒のテキストを配置すると、明度差が最大となり目がチカチカしてしまいます。長文を読ませるブログやメディア記事において、この配色は離脱率を高める原因となります。

color: #000;
目に優しいプロの配色

プロのデザイナーは、テキストカラーに「#333」や「#444」といったダークグレーを使用します。コントラストが適度に抑えられるため、長時間読んでいても目が疲れにくくなります。

color: #333;
HTMLコード表示
<div class="hcc1-wrapper">
  <input type="radio" name="hcc1-state" id="hcc1-bad" class="hcc1-radio" checked>
  <input type="radio" name="hcc1-state" id="hcc1-good" class="hcc1-radio">

  <div class="hcc1-controls">
    <label for="hcc1-bad" class="hcc1-btn">❌ 純黒テキスト (#000)</label>
    <label for="hcc1-good" class="hcc1-btn">⭕️ グレーテキスト (#333)</label>
  </div>

  <div class="hcc1-demo-area">
    <div class="hcc1-box target-bad-hcc1">
      <div class="hcc1-title">目に負担をかける配色</div>
      <p class="hcc1-text">純白の背景に純黒のテキストを配置すると、明度差が最大となり目がチカチカしてしまいます。長文を読ませるブログやメディア記事において、この配色は離脱率を高める原因となります。</p>
      <span class="hcc1-code-label">color: #000;</span>
    </div>

    <div class="hcc1-box target-good-hcc1">
      <div class="hcc1-title">目に優しいプロの配色</div>
      <p class="hcc1-text">プロのデザイナーは、テキストカラーに「#333」や「#444」といったダークグレーを使用します。コントラストが適度に抑えられるため、長時間読んでいても目が疲れにくくなります。</p>
      <span class="hcc1-code-label">color: #333;</span>
    </div>
  </div>
</div>
CSSコード表示
.hcc1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcc1-radio {
  display: none;
}
.hcc1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hcc1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hcc1-bad:checked ~ .hcc1-controls [for="hcc1-bad"] {
  background-color: #000000;
  color: white;
}
#hcc1-good:checked ~ .hcc1-controls [for="hcc1-good"] {
  background-color: #198754;
  color: white;
}
.hcc1-demo-area {
  background-color: #ffffff; /* 親の背景は純白 */
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hcc1-box {
  width: 100%;
  max-width: 350px;
  background-color: #ffffff;
  padding: 25px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.hcc1-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px 0;
}
.hcc1-text {
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 20px 0;
}
.hcc1-code-label {
  display: inline-block;
  font-family: monospace;
  background: #f1f3f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
}

/* ❌ NG：真っ黒 */
.target-bad-hcc1 .hcc1-title,
.target-bad-hcc1 .hcc1-text {
  color: #000000;
}
.target-bad-hcc1 .hcc1-code-label {
  color: #dc3545;
  border: 1px solid #dc3545;
}

/* ⭕️ OK：目に優しいグレー */
.target-good-hcc1 .hcc1-title,
.target-good-hcc1 .hcc1-text {
  color: #333333;
}
.target-good-hcc1 .hcc1-code-label {
  color: #198754;
  border: 1px solid #198754;
}

/* 表示の切り替え */
.target-good-hcc1 {
  display: none;
}
#hcc1-good:checked ~ .hcc1-demo-area .target-bad-hcc1 {
  display: none;
}
#hcc1-good:checked ~ .hcc1-demo-area .target-good-hcc1 {
  display: block;
}

赤・青・緑などの基本カラー

サイトのリンク・警告メッセージ・成功メッセージなど、UIの役割を示すために赤・青・緑の3色は使用されます。

「警告だから赤にしよう」と考える際、#ff0000（原色の赤）やredというカラーコードをそのまま使いがちです。

しかし、デジタル上の100%の原色は非常に彩度が高く「目に痛い色」になってしまいます。

実務でUIに基本カラーを使う場合は、原色から少し明度や彩度を落とした「マイルドな色」を使用します。

例えば、赤なら朱色に近い#ff6347、青なら少し落ち着いた#000080や淡いブルー#0d6efdなどに置き換えるだけで洗練されたデザインに変わります。

エラーが発生しました
入力内容を確認してください。（#ff0000 / red）
エラーが発生しました
入力内容を確認してください。（tomato / #dc3545）
HTMLコード表示
<div class="hcc2-wrapper">
  <input type="radio" name="hcc2-state" id="hcc2-bad" class="hcc2-radio" checked>
  <input type="radio" name="hcc2-state" id="hcc2-good" class="hcc2-radio">

  <div class="hcc2-controls">
    <label for="hcc2-bad" class="hcc2-btn">❌ 原色を使う (#ff0000)</label>
    <label for="hcc2-good" class="hcc2-btn">⭕️ 調整色を使う (tomato等)</label>
  </div>

  <div class="hcc2-demo-area">
    <div class="hcc2-box target-bad-hcc2">
      <div class="hcc2-alert-ng">
        <strong>エラーが発生しました</strong><br>
        入力内容を確認してください。（#ff0000 / red）
      </div>
      <button class="hbc2-btn-ng">削除する</button>
    </div>

    <div class="hcc2-box target-good-hcc2">
      <div class="hcc2-alert-ok">
        <strong>エラーが発生しました</strong><br>
        入力内容を確認してください。（tomato / #dc3545）
      </div>
      <button class="hbc2-btn-ok">削除する</button>
    </div>
  </div>
</div>
CSSコード表示
.hcc2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcc2-radio {
  display: none;
}
.hcc2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hcc2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hcc2-bad:checked ~ .hcc2-controls [for="hcc2-bad"] {
  background-color: #ff0000; /* 原色の赤 */
  color: white;
}
#hcc2-good:checked ~ .hcc2-controls [for="hcc2-good"] {
  background-color: tomato; /* マイルドな赤 */
  color: white;
}
.hcc2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hcc2-box {
  width: 100%;
  max-width: 350px;
  text-align: center;
}

/* アラートボックス共通スタイル */
.hcc2-alert-ng, .hcc2-alert-ok {
  padding: 15px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ボタン共通スタイル */
.hbc2-btn-ng, .hbc2-btn-ok {
  border: none;
  padding: 10px 30px;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

/* ❌ NGスタイル：原色の赤 */
.hcc2-alert-ng {
  background-color: #ffeeee;
  border: 2px solid #ff0000;
  color: #ff0000;
}
.hbc2-btn-ng {
  background-color: #ff0000;
}

/* ⭕️ OKスタイル：マイルドな赤（Bootstrap等で使われる#dc3545やtomato） */
.hcc2-alert-ok {
  background-color: #f8d7da;
  border: 2px solid #f5c2c7;
  color: #842029;
}
.hbc2-btn-ok {
  background-color: tomato;
}

/* 表示の切り替え */
.target-good-hcc2 {
  display: none;
}
#hcc2-good:checked ~ .hcc2-demo-area .target-bad-hcc2 {
  display: none;
}
#hcc2-good:checked ~ .hcc2-demo-area .target-good-hcc2 {
  display: block;
}

おしゃれなパステル・ネオンカラー

女性向けのサイトやキッズ向けのデザインは、ふんわりとしたパステルカラーが好まれます。

逆に、サイバーパンク調やモダンな暗黒系（ダークモード）のデザインは、発光しているネオンカラーがアクセントとして使われます。

CYBERPUNK DESIGN

背景が明るいと、ネオンカラーは完全に視認性を失います。非常にもったいない色使いです。

CYBERPUNK DESIGN

ネオンカラーを使用する場合は、必ずダークトーンの背景と組み合わせるのが鉄則です。

HTMLコード表示
<div class="hcc3-wrapper">
  <input type="radio" name="hcc3-state" id="hcc3-bad" class="hcc3-radio" checked>
  <input type="radio" name="hcc3-state" id="hcc3-good" class="hcc3-radio">

  <div class="hcc3-controls">
    <label for="hcc3-bad" class="hcc3-btn">❌ 白背景にネオン文字 (読めない)</label>
    <label for="hcc3-good" class="hcc3-btn">⭕️ 黒背景にネオン文字 (映える)</label>
  </div>

  <div class="hcc3-demo-area">
    <div class="hcc3-box target-bad-hcc3">
      <div class="hcc3-neon-text">CYBERPUNK DESIGN</div>
      <p class="hcc3-text">背景が明るいと、ネオンカラーは完全に視認性を失います。非常にもったいない色使いです。</p>
    </div>

    <div class="hcc3-box target-good-hcc3">
      <div class="hcc3-neon-text">CYBERPUNK DESIGN</div>
      <p class="hcc3-text">ネオンカラーを使用する場合は、必ずダークトーンの背景と組み合わせるのが鉄則です。</p>
    </div>
  </div>
</div>
CSSコード表示
.hcc3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcc3-radio {
  display: none;
}
.hcc3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hcc3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hcc3-bad:checked ~ .hcc3-controls [for="hcc3-bad"] {
  background-color: #ffffff;
  color: #333;
  border: 2px solid #ccc;
}
#hcc3-good:checked ~ .hcc3-controls [for="hcc3-good"] {
  background-color: #111111;
  color: #39ff14; /* ネオングリーン */
}
.hcc3-demo-area {
  background-color: #e9ecef; /* 外側の枠はグレー */
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.hcc3-box {
  width: 100%;
  max-width: 350px;
  padding: 30px 20px;
  border-radius: 8px;
  text-align: center;
  transition: background-color 0.3s;
}

.hcc3-neon-text {
  font-family: 'Arial Black', sans-serif;
  font-size: 22px;
  color: #39ff14; /* html color neon green */
  margin: 0 0 15px 0;
  /* ネオン風の光彩（text-shadow） */
  text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14; 
}
.hcc3-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  font-weight: bold;
}

/* ❌ NG：背景が白（コントラスト崩壊） */
.target-bad-hcc3 {
  background-color: #ffffff;
}
.target-bad-hcc3 .hcc3-text {
  color: #999999;
}

/* ⭕️ OK：背景が黒（コントラスト確保、ネオンが映える） */
.target-good-hcc3 {
  background-color: #111111;
}
.target-good-hcc3 .hcc3-text {
  color: #dddddd;
}

/* 表示の切り替え */
.target-good-hcc3 {
  display: none;
}
#hcc3-good:checked ~ .hcc3-demo-area .target-bad-hcc3 {
  display: none;
}
#hcc3-good:checked ~ .hcc3-demo-area .target-good-hcc3 {
  display: block;
}

まとめ

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

本記事のまとめ
  • 16進数（Hex）
    #000000や#ffffffのように#と6桁（または3桁）の英数字で指定する手法。
  • カラーネーム
    redやtomatoなどブラウザに定義されたキーワードで指定する手法。
  • RGB / RGBA
    rgba(0, 0, 0, 0.5)のように赤・緑・青の数値と透明度（アルファ値）で指定する手法。
  • 文字色
    colorを使用する。
    一部の文字色を変える場合は<span>タグを併用する。
  • 背景色
    background-colorを使用する。
    背景を透明にする値はnoneではなくtransparentを指定する。
  • 枠線の色
    border-colorを使用する。
  • コントラスト比の確保
    純白の背景に純黒（#000）はハレーションを起こすため、長文テキストにはダークグレー（#333）を使用する。
  • 透過指定の使い分け
    要素全体（中のテキスト含む）を透過させる場合はopacity、背景色のみを透過させる場合はrgba()を使用する。
  • 初期スタイルのリセット
    <button>などのブラウザ標準枠線はborder: none;でリセットしてから背景色や独自の枠線を適用する。
  • ホバー時のアニメーション
    :hover疑似クラスで色を変化させる際は、transitionプロパティを併記して滑らかに切り替える。
  • カラーツールの活用
    目視による抽出ノイズや不自然な配色を防ぐため、カラーピッカーや配色ジェネレーターを用いて数値を管理する。

よくある質問（FAQ）

HTMLで文字の色を変えるにはどうすればいいですか？

現在のWeb標準はHTMLタグに直接色を書き込む手法（<font>タグなど）は非推奨です。

CSSのcolorプロパティを使用して指定します。

（例：<span style="color: #ff0000;">赤色の文字</span>）

HTMLのカラーコードとは何ですか？

Web上で色を正確に表現・指定するための文字列です。

主に#から始まる6桁の英数字（16進数：例#ffffff）が使われます。

他にもredなどのカラーネームやrgb(255,0,0)といった数値の組み合わせで表現する方法があります。

ページや要素の背景色を変えるにはどうすればいいですか？

CSSのbackground-colorプロパティを使用します。

ページ全体の背景を変えたい場合はbodyタグに対し、特定部分だけを変えたい場合は対象のdivタグやpタグに対してカラーコードを指定します。

背景色を半透明（透過）にするにはどう指定しますか？

透明度を含めて色を指定できるrgba()を使用します。

例えば、黒の半透明にしたい場合はbackground-color: rgba(0, 0, 0, 0.5);のように記述します。

最後の数値（アルファ値）を0.0（完全な透明）から1.0（不透明）の間で調整します。

使いたい色のカラーコードを調べるにはどうすればいいですか？

Google検索で「カラーピッカー」と検索すると、検索結果で直感的に色を作成しコードを取得できるツールが使えます。

また、写真や参考サイトから色を抜き出したい場合はブラウザの拡張機能を利用するのが一般的です。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

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

関連記事

目次