やさしいホームページ入門
カラーコード / サイトについて / リンク集 / お問い合わせ
ホーム > CSS入門 > CSSでの色の指定方法
カラーネームで指定する
CSSでは色の指定方法が複数あります。これらの指定方法は状況によって使い分けることが大切です。
まずはじめは、HTMLの属性値にも指定できるカラーネームでの指定方法を説明します。これは、一番簡単でただCSSの値の部分に色の名前を書くだけです。
下のサンプルソースで使っている color プロパティは文字色を変更するCSSです。(後で詳しく説明します)
p {
  color : red
}
RGB値で指定する(その一)
二つ目はRGB値での指定方法を説明します。まずRGBとはRED GREEN BLUEのことで、これらをまとめてRGBといいます。
二つ目の指定方法はこのRGBを2桁ずつ記述する方法です。これは普段使っている16進数カラーコードと同じです。
p {
  color : #FFFFFF
}
RGB値で指定する(その二)
先ほどの指定方法は6桁でしたが、今度は3桁の指定方法を説明します。下に記述されている#F69#FF6699のことです。このような6桁のRGB値は3桁に省略することができます。
p {
  color : #F69
}
RGB値で指定する(その三)
次はrgb(R,G,B)での指定方法です。それぞれR,G,Bの部分には1〜255までの数値を指定することができます。これは、R,G,B,それぞれの割合を詳しく指定することができます。
p {
  color : rgb(100,100,100)
}
RGB値で指定する(その四)
次もrgb(R,G,B)での指定方法です。今度は1〜255の数値ではなく1〜100%の割合で指定する方法です。これらの値はしっかり半角数字で指定しましょう。
p {
  color : rgb(50%,50%,50%)
}