CSSのcolorでテキストの色を指定し、デザインを調整する方法をわかりやすく解説

2024.09.13
スポンサーリンク

colorプロパティは、テキストの色を指定するためのプロパティです。さまざまな色指定方法があり、RGBやHSL、キーワードによる指定などが可能です。ウェブページの視覚的なデザインにおいて、テキストの色を適切に設定することは重要です。

スポンサーリンク

色の番号

カラーピッカーを利用してみてください。

画像や動画から色情報を取得変換 RGB、CMYK、HSV、Lab、YUV、YCbCr、XYZなどに対応！
Color Picker & Converterパソコン環境用の万能カラーピッカーです。このアプリでできること Youtubeの動画から色番号を取得する 撮影した写真から色番号を取得する 送られてきた画像から色番号を取得する 多様な色空間への変換対応する色系統　16進数表記(HEX)、RGB、CMYK、HSV(HSB)...
programming-cafe.com

colorプロパティの値とその効果

  • color-name: 色名（キーワード）で指定します。例: red, blue, green。
  • hex-code: 16進数で色を指定します。例: #FF5733, #0000FF。
  • rgb(): 赤、緑、青の値を整数で指定して色を指定します。例: rgb(255, 0, 0)。
  • rgba(): rgb()と同様ですが、アルファ（透明度）も指定可能です。例: rgba(255, 0, 0, 0.5)。
  • hsl(): 色相（Hue）、彩度（Saturation）、明度（Lightness）で色を指定します。例: hsl(240, 100%, 50%)。

注意点と関連情報

colorプロパティは、アクセシビリティを考慮して使用することが重要です。背景色とのコントラストが低いと、視認性が悪くなるため、適切な色の組み合わせを選ぶ必要があります。また、色を指定する際には、ユーザーがカスタムスタイルを適用できることを考慮して、ブラウザのデフォルト色も意識してデザインすることが推奨されます。

colorプロパティが効かない時の原因と対策

opacityやfilterの影響

colorプロパティで設定した色が、要素や親要素に適用されているopacityやfilterプロパティの影響を受けて、意図しない形で薄く見えたり、ぼやけたりすることがあります。
対策: 要素や親要素に適用されているopacityやfilterの設定を確認し、必要に応じてこれらの値を調整することで、テキストの色が正しく表示されるようにします。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
    }
    .css-sample-box {
        margin: 10px 0;
        padding: 15px;
        font-size: 18px;
        text-align: center;
    }

color: red

color: redは、テキストの色を赤に設定します。これは色名による指定で、簡単に視覚的にわかりやすい色を指定することができます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-color-red">テキストの色: 赤</div>
    </div>

CSSコード

.css-sample-color-red {
    color: red;
}

表示結果

テキストの色: 赤

color: rgb(0, 128, 0)

rgb(0, 128, 0)は、RGB値を使って緑色を指定しています。赤、緑、青の3つの値を0〜255で指定することで、柔軟な色の指定が可能です。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-color-rgb">テキストの色: 緑 (RGB)</div>
    </div>

CSSコード

.css-sample-color-rgb {
    color: rgb(0, 128, 0);
}

表示結果

テキストの色: 緑 (RGB)

color: #0000FF

#0000FFは、16進数で指定した青色です。16進数は、それぞれの色の強度を0〜FFで表現する方法で、Webデザインにおいてよく使われます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-color-hex">テキストの色: 青 (Hex)</div>
    </div>

CSSコード

.css-sample-color-hex {
    color: #0000FF;
}

表示結果

テキストの色: 青 (Hex)

color: hsl(240, 100%, 50%)

hsl(240, 100%, 50%)は、色相（Hue）、彩度（Saturation）、明度（Lightness）を使って青色を指定しています。HSLは色を直感的に理解しやすく、デザイン作業において非常に便利です。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-color-hsl">テキストの色: 青 (HSL)</div>
    </div>

CSSコード

.css-sample-color-hsl {
    color: hsl(240, 100%, 50%);
}

表示結果

テキストの色: 青 (HSL)

まとめ

colorプロパティを使用することで、テキストの色を柔軟に指定することができます。色指定の方法としては、キーワード、RGB、16進数、HSLなどがあります。それぞれの場面に応じて適切な色指定方法を選択することが、視覚的にバランスの取れたデザインを実現するために重要です。また、色のコントラストやアクセシビリティを考慮して、適切なカラーデザインを心がけましょう。

スポンサーリンク