概要
CSSプロパティ｢color｣は、文字やその装飾に対しての色を指定することができます。
<p class="color-red">colorプロパティに赤色を指定します</p>
<p class="color-blue">colorプロパティに青色を指定します</p>
<style>
.color-red {
color: red;
}
.color-blue {
color: blue;
}
</style>値の指定方法
{ color: 値 }値として以下のような指定をすることができます。
| 値 | 説明 |
|---|---|
| カラーネーム | red, blueなどのカラーネーム |
| 16進数 | 3桁ないし6桁のカラーコード |
| RGB表記 | RGBの各要素に対応する0～255までの数字をカンマで区切って指定 |
| RGB表記 | RGBの各要素に対応する0～100%の数字をカンマで区切って指定 |
| hsl表記 | 色相,彩度,輝度を指定 |
新しい指定方法としてのhsl
hslとは色相（Hue）,彩度（Saturation ),輝度（Luminance/Lightness）の略でcss3で提唱されている新しい指定方法です。色相環の角度を指定し、彩度、輝度をパーセントで指定します。以下に実際に指定した例を記述しますので、確認してみてください。
使用方法
｢赤色｣を異なった記述方法で指定してみましょう。
<p class="color-name">colorプロパティにカラーネームを指定します</p>
<p class="color-code">colorプロパティにカラーコードを指定します</p>
<p class="color-rgb">colorプロパティにRGB（数字）を指定します</p>
<p class="color-percent">colorプロパティにRGB（割合）を指定します</p>
<p class="color-rgba">colorプロパティにRGBA（透過）を指定します</p>
<p class="color-hsl">colorプロパティにhslを指定します</p>
<p class="color-hsla">colorプロパティにhsla（透過）を指定します</p>
<style>
.color-name {
color: red;
}
.color-code {
color: #ff0000;
}
.color-rgb {
color: rgb(255, 0, 0);
}
.color-percent {
color: rgb(100%, 0%, 0%);
}
.color-rgba {
color: rgba(255, 0, 0, 0.3);
}
.color-hsl {
color: hsl(0,100%,50%);
}
.color-hsla {
color: hsla(0,100%,50%, 0.3);
}
</style>