【CSS】色の指定
プロパティ
色に関するプロパティには主に以下のようなものがあります。
| プロパティ | 説明 |
|---|---|
color | フォント色 |
background-color | 背景色 |
border-color | 境界色 |
outline-color | 輪郭色 |
box-shadow | 値の 1 つとして影の色を指定 |
色の値
色名
色の中にはredのように名前がつかられているものがあり、プロパティ値として指定することができます。
.red { color: red; }ただし、色名を覚えるのは大変なため、メジャーなもの以外はあまり使用しません。
RGB、RGBA
RGB は、赤（Red）、緑（Green）、青（Blue）の 3 つで色を表現します。それぞれ 0〜255 の値で表現します。 値が大きほど
.red { color: rgb(255, 0, 0); }
.green { color: rgb(0, 255, 0); }
.blue { color: rgb(0, 0, 255); }
.black { color: rgb(0, 0, 0); }
.white { color: rgb(255, 255, 255); }RGBA は、RGB に透過度が加わります。透過度は 0.0〜1.0 の値で表現します。
.black10 { color: rgba(0, 0, 0, 1); } /* 通常黒 */
.black05 { color: rgba(0, 0, 0, 0.5); } /* 半透明 */
.black00 { color: rgba(0, 0, 0, 0); } /* 透明 */HEX
HEX は、RGB の 0〜255 を 16 進数で 00〜FF に変換した表現方法です。先頭に#をつけ#000000のように指定します。
.red { color: #FF0000; }
.green { color: #00FF00; }
.blue { color: #0000FF; }
.black { color: #000000; }
.white { color: #FFFFFF; }8 桁にすることで透過度を指定できます。
.black10 { color: #000000FF; } /* 通常黒 */
.black05 { color: #00000088; } /* 半透明 */
.black00 { color: #00000000; } /* 透明 */HSL, HSLA
HSL は、色相（H）、彩度（S)、輝度（L）で色を表現します。
.red { color: hsl(0, 100%, 50%); }
.green { color: hsl(135, 100%, 50%); }
.blue { color: hsl(225, 100%, 50%); }
.black { color: hsl(0, 100%, 0%); }
.white { color: hsl(0, 100%, 100%); }色相は、0〜360 でベースとなる色を決めます。以下のプレビューは上から下に向かって 0〜360 の値になっています。
彩度、輝度は 0%〜100%で指定し、それぞれ 100%、50%が基準値となります。値の変化による色は以下のプレビューを参考にしてください。
| 彩度（S) | ||||||
| 0% | 25% | 50% | 75% | 100%（★） | ||
| 輝度（L) | 0% | |||||
| 25% | ||||||
| 50%（★） | ||||||
| 75% | ||||||
| 100% | ||||||
HSLA は、RGBA と同じく透過度（0.0〜1.0）を指定します。
その他
transparent
transparentは、透過度が 0、つまり透明な色として指定します。rgba(0, 0, 0, 0)と同じ結果になります。
.color { color: transparent; }currentcolor
currentcolorは、要素のcolorプロパティの値です。
<div style="color: red">
<p>aiueo</p>
<p style="background: currentcolor">aiueo</p>
</div>aiueo
aiueo
linear-gradient()
linear-gradient()は、グラデーションを指定するためのものです。
色と位置（%）の組み合わせで指定します。位置を指定しなかった場合は等間隔になります。
.gradation1 { background: linear-gradient(red, yellow, green, blue); }
.gradation2 { background: linear-gradient(red 0%, yellow 15%, green 75%, blue 100%); }・gradation1
・gradation2
グラデーションの向きは、角度（degなど）を指定することで変えられます。
また、0 度、90 度、180 度、270 度はそれぞれto top、to right、to bottom、to leftのキーワードが用意されています。
デフォルトは180degです。
.gradation-top { background: linear-gradient(0deg, red, yellow, green, blue); }
.gradation-right { background: linear-gradient(to right, red, yellow, green, blue); }
.gradation-bottom-left { background: linear-gradient(315deg, red, yellow, green, blue); }| 0deg | 45deg | 90deg | 135deg |
| 180deg（★） | 225deg | 270deg | 315deg |
opacity
opacityは要素全体の透過度を表すプロパティです。0.0〜1.0 で指定します。
.opacity10 { opacity: 1.0; }
.opacity05 { opacity: 0.5; }
.opacity01 { opacity: 0.1; }