CSSの色指定を完全ガイド！初心者でもわかるカラーネーム、カラーコード16進表記、10進表記

新人と先輩の会話形式で理解しよう

新人

「CSSで色を指定する方法はたくさんあるみたいですが、カラーネーム、カラーコード16進表記、10進表記って何が違うんですか？」

先輩

「CSSでは色を指定する方法として、カラーネームやカラーコード16進表記、10進表記などがあります。それぞれ少しずつ使い方や特性が異なるんですよ。」

新人

「それぞれの使い方について教えてください。」

先輩

「もちろん、まずはカラーネームから見ていきましょう。」

1. カラーネーム（色名）とは？

カラーネームとは、色の名前を使って色を指定する方法です。例えば、「red」や「blue」、「green」といった色の名前を使って、簡単に色を指定することができます。

カラーネームは非常にシンプルでわかりやすいので、初心者にもおすすめです。ただし、使える色の名前には限りがあります。

以下の例では、h1タグに「red」というカラーネームを使って色を指定しています：


<style>
    h1 {
        color: red;
    }
</style>

<h1>赤い文字の見出し</h1>

ブラウザ表示

このコードでは、h1タグに「red」と指定しています。カラーネームはシンプルで直感的に使えるため、手軽に色を指定したい時に便利です。

カラーコード16進表記は、色を16進数で表現する方法です。16進数のコードは、色の「赤」「緑」「青」の成分を2桁ずつで表し、それぞれの値を00〜FFで指定します。

カラーコード16進表記は、色の精度が高く、色の選択肢も広いため、ウェブデザインでは非常によく使用されます。例えば、#FF0000は純粋な赤を意味し、#00FF00は純粋な緑を意味します。

以下のコードでは、h1タグの色を16進表記「#FF5733」で指定しています：


<style>
    h1 {
        color: #FF5733;
    }
</style>

<h1>16進表記で色を指定した見出し</h1>

ブラウザ表示

このコードでは、16進表記のカラーコード「#FF5733」を使用して、h1タグの色を指定しています。カラーコード16進表記は精度が高く、色のバリエーションが豊富です。

10進表記は、色をRGB（赤、緑、青）の10進数で指定する方法です。RGBはそれぞれの色成分を0から255までの値で指定し、これらを組み合わせて色を作ります。例えば、rgb(255, 0, 0)は赤、rgb(0, 255, 0)は緑、rgb(0, 0, 255)は青を意味します。

10進表記は、カラーコード16進表記と同様に、RGBの3つの色成分を調整することで、任意の色を作り出すことができます。

以下のコードでは、h1タグの色をRGBで指定しています：


<style>
    h1 {
        color: rgb(255, 87, 51);
    }
</style>

<h1>RGBの10進表記で色を指定した見出し</h1>

ブラウザ表示

このコードでは、RGBの10進数表記で「rgb(255, 87, 51)」を使って、h1タグの色を指定しています。RGBは色の微調整に便利な方法です。

それぞれの方法には特徴があり、使い分けることでデザインの幅が広がります。最初はカラーネームで簡単に始め、慣れてきたらカラーコードやRGBを使って色の微調整をしていくと良いでしょう。