【完全保存版】CSSで色を変更する方法まとめ｜文字色・背景色・ボーダー色を初心者向けに徹底解説

CSSを学び始めると、まずやってみたくなるのが
「色を変える」 という操作です。

文字の色を変えたい
背景に色をつけたい
デザインにアクセントカラーを入れたい

この記事では、「css 色変更」で検索した初心者の方に向けて、
CSSで色を変更する基本的な方法から、
実務でも使える指定方法までを 体系的に解説 します。

CSSで色を変更するとは

CSSで色を変更するとは、
HTML要素の文字・背景・枠線などの色を指定することです。

CSSでは主に次の部分の色を変更できます。

文字の色
背景の色
枠線（ボーダー）の色
リンクの色

まずは、それぞれの基本を理解することが大切です。

文字の色を変更する方法（color）

文字の色を変更するには、color プロパティを使います。

p {
  color: red;
}

ポイント

文字色を指定する基本プロパティ
見出し・文章・リンクなどに使える

背景色を変更する方法（background-color）

背景に色をつけたい場合は、background-color を使います。

div {
  background-color: #f5f5f5;
}

よく使われる場面

セクションの背景
ボックスデザイン
強調エリア

枠線の色を変更する方法（border-color）

枠線の色は border-color で指定します。

.box {
  border: 1px solid #333;
}

または個別指定も可能です。

.box {
  border-color: red;
}

CSSで色を指定する方法の種類

CSSでは、色の指定方法が複数あります。

色名で指定する方法

p {
  color: red;
}

red / blue / black / white など
簡単だが表現できる色は少なめ

カラーコード（16進数）で指定する方法

p {
  color: #333333;
}

最も一般的
細かい色調整が可能
デザインでは主流

RGBで指定する方法

p {
  color: rgb(255, 0, 0);
}

赤・緑・青の組み合わせ
数値で直感的に調整できる

RGBAで透明度を指定する方法

p {
  color: rgba(0, 0, 0, 0.6);
}

最後の数値が透明度
0〜1の範囲で指定

背景を透かしたいときによく使われます。

リンクの色を変更する方法

リンクの色は、擬似クラスを使って指定します。

a {
  color: blue;
}

a:hover {
  color: red;
}

よく使われる状態

a：通常時
:hover：マウスを乗せたとき
:visited：訪問済み

CSSで色を変更するときの注意点

コントラストを意識する

背景と文字の色が近すぎると読みにくい
明度差をしっかりつける

body {
  color: #333;
  background-color: #fff;
}

色を使いすぎない

メインカラー
サブカラー
アクセントカラー

基本は3色程度に抑えると、デザインが整います。

CSSで色が変わらないときの原因

セレクタが間違っている

.text {
  color: red;
}

<p class="txt">文章</p>

クラス名が一致していないと反映されません。

CSSの読み込みができていない

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

ファイルパスの確認も忘れずに行いましょう。

よくある質問

どの色指定方法を使うのがおすすめですか

基本は カラーコード（16進数） が最も使われます。
透明度が必要な場合は RGBA を使いましょう。

CSSでグラデーションも作れますか

可能です。
ただし、まずは単色指定に慣れるのがおすすめです。

まとめ

CSSで色を変更する方法は、Webデザインの基本中の基本です。

文字色は color
背景色は background-color
枠線は border-color
色指定はカラーコードが主流

「css 色変更」で検索した方は、
まず 文字色と背景色の指定方法 をしっかり理解することから始めてみてください。
色の扱いに慣れることで、CSSデザインの幅が大きく広がります。

【完全保存版】CSSで色を変更する方法まとめ｜文字色・背景色・ボーダー色を初心者向けに徹底解説