SEO+のカスタマイズページで「パーツごとの色変更」という項目を作ったのですが、これまでCSSに無縁だった人には説明不足だなと感じたので、CSSで色を指定する方法を簡単にまとめておきます。
主に3通りのやり方があります。
CSSで色を指定する場面
先述の「パーツごとの色変更」では文字色と背景色ぐらいしか例にあげていませんが、実際には下線の色、枠線の色、影をつける場合など色を指定したい場面は結構多いですし、その配色自体がサイトの印象をプラスにするかマイナスにするかを左右することも多々ありますので、実は結構重要な要素ではないかと思ったりします。
色を使いすぎると、今では伝説となった愛生会病院のホームページみたいになりますし要注意です。
CSSの色指定その１ カラーネーム
一番かんたんなのが名前で直接指定。
red とかblueとか。個人的に好きなのはtomato です。トマト美味しいですよね。
/* カラーネームによる指定例 */
#hoge{
color : red ;
background-color : tomato ;
border: navy 1px solid ;
box-shadow: 0 0 0 crimson ;
}ただし、カラーネームによる指定はブラウザによって処理が異なる場合があるので、べたな名前（red blueなど）以外をそのまま使用するのはおすすめしません。
CSSの色指定その２ カラーコード
面倒な説明はすっ飛ばして書くと、6桁の英数字コードで色を指定します。
英数字には０〜９とa〜f の16文字を使います。
たとえば黒なら #000000 。白なら #ffffff です。
カラーコードが一覧になった便利なサイトがあるのでご参照ください。
さきほどのカラーネームや後述のRGB値も併記されています。
/* カラーコードによる指定 */
#hoge{
color : #ff0000 ;
background-color : #ff6347 ;
}8桁のカラーコード
次のRGBA値の項目で一緒にやりますが、6桁のカラーコードに「透明度」を表す2桁の数字を加えた8桁記述もあります。
その３ RGB値
RGBは、Red Green Blue の頭文字です。
色を構成する赤・緑・青 の度合いを０〜255の数値で指定することで１つの色を指定します。
実は先ほどのカラーコードも同じことをしています。６桁のコードは前から２桁ずつ、Red、Green、Blueを表しています。(16個の数字を２つ使うので 256通りの組み合わせが作れますね。）
/* rgbによる指定 */
#hoge{
color : rgb( 255 , 0 , 0 ) ;
background-color : rgb( 255 , 99 , 71 ) ;
}透明度を追記 rgba値
rgb にAlpha (透明度)を加えた４つの数字を指定します。
Aの値は０（= 0% = 完全透明）から１（= 100% = 完全不透明）の間の数を指定します。
- rgba(255 , 0 , 0 , 1)
- rgba(255 , 0 , 0 , 0.9)
- rgba(255 , 0 , 0 , 0.8)
- rgba(255 , 0 , 0 , 0.7)
- rgba(255 , 0 , 0 , 0.6)
- rgba(255 , 0 , 0 , 0.5)
- rgba(255 , 0 , 0 , 0.4)
- rgba(255 , 0 , 0 , 0.3)
- rgba(255 , 0 , 0 , 0.2)
- rgba(255 , 0 , 0 , 0.1)
カラーコードによる透明度の指定
rgba値ではなく、カラーコードで透明度を指定することもできます。1%区切りで全て書くと大変なので10％刻みで例を載せておきます。
| コード | 透明度 |
| ff | 100％ |
| e6 | 90％ |
| cc | 80% |
| b3 | 70% |
| 99 | 60% |
| 80 | 50% |
| 66 | 40% |
| 4d | 30% |
| 33 | 20% |
| 1a | 10% |
たとえばrgba( 0, 0, 0, 0.5)だと、#00000080 と置き換えることもできます。
