1. Home
  2. スタイルシート CSS
  3. CSSの基本
  4. CSSの色指定

CSSの色指定



指定方法

HTMLと同じ指定方法と、CSS独自の指定方法があります。

■HTMLと同じ指定方法
#ff0000 ハッシュ( # )で始まる6桁のカラーコードで指定
red redやgreen、whiteといったカラーネームで指定
.example1 { color: #ff0000; }
.example2 { color: red; }
■CSS独自の指定方法
#f00 ハッシュ( # )で始まる3桁のカラーコードで指定
rgb(255,0,0) rgb( ) による指定 (0255
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桁目がを意味しています。この指定方法では、それぞれの色の強さを 0f までの16進数で指定します。

0 に近いほどその色は弱くなり、f に近いほどその色が強調されます。

  • #f00
  • #fff
  • #000

rgb( ) による指定 (0〜255)

rgb(255,255,255)

( ) の中に、の各値をカンマ( , )で区切って記述します。この指定方法では、それぞれの色の強さを 0255 までの数値で指定します。

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%)

CSSの基本

ページの先頭へ