CSS

CSSで色を指定しよう！カラーコード・color・background-colorの基本

Webサイトでは、背景や文字の色を自由に変えることができます。

例えば、明るい色を使うとポップな印象になり、落ち着いた色を使うとシックなデザインになります。

CSSではカラーコードという方法を使って色を指定します。

この記事では、カラーコードの仕組みや、color・background-color プロパティの使い方を解説し、実際に試してみましょう！

カラーコードとは？

カラーコードは、Webサイトで色を指定するための方法です。

CSSでは、次の3つの方法で色を指定できます。

指定方法 例 特徴
色の名前 red, blue, green わかりやすいが、使える色が限られる
16進数（Hex） #ff0000（赤） 細かい色を指定できる
RGB rgb(255, 0, 0)（赤） 色の明るさを調整しやすい

例：同じ「赤」を3種類の方法で指定する

p {
    color: red;        /* 色の名前 */
    color: #ff0000;    /* 16進数 */
    color: rgb(255, 0, 0); /* RGB */
}

文字の色を変える（colorプロパティ）

color プロパティを使うと、文字の色を変更できます。

実際に試してみよう！

次のHTMLを作成して、index.html として保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>文字の色を変えてみよう</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>文字の色を変えよう！</h1>
    <p class="red">この文章は赤色です。</p>
    <p class="blue">この文章は青色です。</p>
    <p class="green">この文章は緑色です。</p>
</body>
</html>

CSS（style.css）

次に、CSSのコードを style.css に保存しましょう。

p.red {
    color: red;
}

p.blue {
    color: #0000ff;
}

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

いろいろな色を試してみよう！

以下のコードをコピーして、自分で値を変更して試してみましょう！

色の名前で試す（color name）

CSSでは、英単語で色を指定できます。以下のリストの色名を使って試してみましょう。

p {
    color: blue; /* 他に red, green, yellow, purple, orange, pink など */
}

16進数（Hex）で試す

16進数（Hex）は、#RRGGBB の形式で色を指定します。

以下の色を試してみましょう！

  • #ff0000（赤）
  • #00ff00（緑）
  • #0000ff（青）
  • #ffff00（黄色）
  • #ff00ff（紫）
  • #00ffff（水色）
p {
    color: #ff0000; /* 他に #00ff00, #0000ff など */
}

RGBで試す

RGBは、赤・緑・青の3つの値で色を表現します。

以下の色を試してみましょう！

  • rgb(255, 0, 0)（赤）
  • rgb(0, 255, 0)（緑）
  • rgb(0, 0, 255)（青）
  • rgb(255, 255, 0)（黄色）
  • rgb(255, 0, 255)（紫）
  • rgb(0, 255, 255)（水色）
p {
    color: rgb(255, 0, 0); /* 他に rgb(0, 255, 0), rgb(0, 0, 255) など */
}

自分で色を選んでみよう！

以下のサイトでは、色を選んでカラーコードを取得できます。試しに使ってみましょう！

自分で好きな色を選んで、CSSの color や次の background-color に設定してみましょう！

背景の色を変える（background-colorプロパティ）

background-color プロパティを使うと、背景の色を変更できます。

実際に試してみよう！

次のHTMLを作成して、index.html に追加してください。

<div class="bg-red">赤い背景</div>
<div class="bg-blue">青い背景</div>
<div class="bg-green">緑の背景</div>

CSS（style.css）

次に、CSSに背景色を指定します。

div.bg-red {
    background-color: red;
}

div.bg-blue {
    background-color: #0000ff;
}

div.bg-green {
    background-color: rgb(0, 255, 0);
}

色を変更してみよう！

いろいろな色を試して、サイトのデザインに合う色を見つけてみましょう！

問題集

Q1. CSSで文字の色を変えるプロパティはどれ？

  1. font-color
  2. text-color
  3. color

Q2. 背景の色を変えるプロパティはどれ？

  1. background
  2. background-color
  3. bg-color

Q3. 次のCSSで、文字の色は何色になる？

p {
    color: #ff0000;
}
  1. 青
  2. 赤
  3. 緑

✅ 答え: Q1→3, Q2→2, Q3→2

まとめ

  • カラーコードには「色の名前」「16進数」「RGB」がある
  • color を使うと、文字の色を変えられる
  • background-color を使うと、背景の色を変えられる
  • いろいろな色を試して、デザインを工夫しよう

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。