指定方法
HTMLと同じ指定方法と、CSS独自の指定方法があります。
#ff0000 |
ハッシュ( # )で始まる6桁のカラーコードで指定 |
red |
red やgreen 、white といったカラーネームで指定 |
.example1 { color: #ff0000; }
.example2 { color: red; }
#f00 |
ハッシュ( # )で始まる3桁のカラーコードで指定 |
rgb(255,0,0) |
rgb( ) による指定 (0 ~255 ) |
rgb(100%,0%,0%) |
rgb( ) による指定 (0% ~100% ) |
.example3 { color: #f00; }
.example4 { color: rgb(255,0,0); }
.example5 { color: rgb(100%,0%,0%); }
ハッシュ( #
)で始まる3桁のカラーコードで指定
#fff
1桁目が赤、2桁目が緑、3桁目が青を意味しています。この指定方法では、それぞれの色の強さを 0
~ f
までの16進数で指定します。
0
に近いほどその色は弱くなり、f
に近いほどその色が強調されます。
- ■
#f00
- □
#fff
- ■
#000
rgb( )
による指定 (0
~255
)
rgb(255,255,255)
( )
の中に、赤、緑、青の各値をカンマ( ,
)で区切って記述します。この指定方法では、それぞれの色の強さを 0
~ 255
までの数値で指定します。
0
に近いほどその色は弱くなり、255
に近いほどその色が強調されます。
- ■
rgb(255,0,0)
- □
rgb(255,255,255)
- ■
rgb(0,0,0)
rgb( )
による指定 (0%
~100%
)
rgb(100%,100%,100%)
( )
の中に、赤、緑、青の各値をカンマ( ,
)で区切って記述します。この指定方法では、それぞれの色の強さを 0%
~ 100%
までの割合で指定します。
0%
に近いほどその色は弱くなり、100%
に近いほどその色が強調されます。
- ■
rgb(100%,0%,0%)
- □
rgb(100%,100%,100%)
- ■
rgb(0%,0%,0%)