技術コンテンツ

CSS
【CSS】スタイルのカラー(色)

【CSS】スタイルのカラー(色)

CSSのカラー(色)について解説します。

検証環境

カラー

CSSはテキストや背景などの色を設定できます。

色の表現方法は主に『カラーネーム』、『カラーコード』、『関数記法』の3つあります。

カラーネーム

カラーネームは色の名称です。

例えば赤はred、緑はgreen、青はblueです。

<style>
p {
    ___ih_hl_start
    color: red;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

カラーコード

カラーコードは色を6桁の16進数で表した値です。

先頭にシャープ(#)を付け、例えば赤は#FF0000、緑は#00FF00、青は#0000FFです。

<style>
p {
    ___ih_hl_start
    color: #FF0000;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

関数記法 : rgb(値,値,値)

関数記法rgb(値,値,値)は色をRGBで表した値です。

3つの各値は0~255の数値をとり、その配合によって値が決まります。

例えば、例えば赤はrgb(255, 0, 0)、緑はrgb(0, 255, 0)、青はrgb(0, 0, 255)です。

<style>
p {
    ___ih_hl_start
    color: rgb(255, 0, 0);
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>