CSS プロパティ color

CSS の color プロパティ: ウェブページのテキストに彩りを添える

CSS の color プロパティ: ウェブページのテキストに彩りを添える

color プロパティは、HTML 要素のテキストの色を設定するために使用されます。 この記事では、color プロパティのさまざまな値の指定方法について詳しく説明します。 色キーワード、RGB、RGBA、HSL、HSLA、16 進数カラーコードなど、さまざまなオプションについて学び、 ウェブページのテキストに豊かな色彩を加える方法をマスターしましょう。

色の指定方法

  1. 色キーワード

    red、blue、green、black、white など、 頻繁に使用される色を表すキーワードを使用できます。

    メリット： 直感的で覚えやすい。
    デメリット： 使用できる色の数が限られている。 

    
<p style="color: blue;">これは青色のテキストです。</p>

    上記のコードは、以下のように表示されます。

    これは青色のテキストです。

  2. RGB カラー値

    RGB カラーモデルを使用して色を指定できます。 rgb(red, green, blue) の形式で値を指定します。 red、green、blue の値は、それぞれ 0 から 255 の範囲で指定します。 

    
<p style="color: rgb(255, 0, 0);">これは赤色のテキストです。</p>

    上記のコードは、以下のように表示されます。

    これは赤色のテキストです。

  3. RGBA カラー値

    RGBA は RGB にアルファチャンネル（透明度）を追加したものです。 rgba(red, green, blue, alpha) の形式で値を指定します。 alpha 値は 0.0（完全に透明）から 1.0（完全に不透明）の範囲で指定します。 

    
<p style="color: rgba(0, 0, 255, 0.5);">これは半透明の青色のテキストです。</p>

    上記のコードは、以下のように表示されます。

    これは半透明の青色のテキストです。

  4. HSL カラー値

    HSL カラーモデルを使用して色を指定できます。 hsl(hue, saturation, lightness) の形式で値を指定します。

    • hue: 色相を表し、0 から 360 の範囲の角度で指定します。
    • saturation: 彩度を表し、0%（灰色）から 100%（純色）の範囲で指定します。
    • lightness: 明度を表し、0%（黒）から 100%（白）の範囲で指定します。
    
<p style="color: hsl(120, 100%, 50%);">これは緑色のテキストです。</p>

    上記のコードは、以下のように表示されます。

    これは緑色のテキストです。

  5. HSLA カラー値

    HSLA は HSL にアルファチャンネル（透明度）を追加したものです。 hsla(hue, saturation, lightness, alpha) の形式で値を指定します。 alpha 値は 0.0（完全に透明）から 1.0（完全に不透明）の範囲で指定します。 

    
<p style="color: hsla(0, 100%, 50%, 0.7);">これは半透明の赤色のテキストです。</p>

    上記のコードは、以下のように表示されます。

    これは半透明の赤色のテキストです。

  6. 16 進数カラーコード

    16 進数カラーコードを使用して色を指定できます。 #RRGGBB の形式で値を指定します。 RR、GG、BB は、それぞれ赤、緑、青の 16 進数（00 から FF）で指定します。 

    
<p style="color: #0000FF;">これは青色のテキストです。</p>

    上記のコードは、以下のように表示されます。

    これは青色のテキストです。

  7. currentColor キーワード

    currentColor キーワードは、要素の計算された color 値を他のプロパティの値として使用します。 

    
<p style="color: blue; border: 2px solid currentColor;">これは青色のテキストで、枠線も青色です。</p>

    上記のコードは、以下のように表示されます。

    これは青色のテキストで、枠線も青色です。

色の使用例

color プロパティは、テキストの色を変更するだけでなく、さまざまな用途に使用できます。 以下に、いくつかの例を示します。

用途 例
リンクの色を変更する 

<a href="#" style="color: red;">これは赤いリンクです。</a>
リストのマーカーの色を変更する 

<ul style="list-style: disc; color: green;">
  <li>項目1</li>
  <li>項目2</li>
</ul>
表のセルの背景色を変更する 

<table>
  <tr>
    <td style="background-color: yellow;">セル1</td>
    <td>セル2</td>
  </tr>
</table>

参考資料

よくある質問

Q1: color プロパティで指定できる色の数は？

色キーワード、RGB、RGBA、HSL、HSLA、16 進数カラーコードなど、 さまざまな方法で色を指定できるため、事実上無限の色を指定できます。

Q2: テキストの色だけでなく、背景色も変更したい場合は？

背景色を変更するには、background-color プロパティを使用します。

Q3: 特定の要素のみに color プロパティを適用するには？

特定の要素にのみ color プロパティを適用するには、 CSS のセレクタを使用します。 たとえば、ID が my-text の要素のテキストの色を赤色にするには、 以下の CSS を記述します。 


#my-text {
  color: red;
}