CSSの色編集いろいろ

SEO+のカスタマイズページで「パーツごとの色変更」という項目を作ったのですが、これまでCSSに無縁だった人には説明不足だなと感じたので、CSSで色を指定する方法を簡単にまとめておきます。
主に3通りのやり方があります。

CSSで色を指定する場面

先述の「パーツごとの色変更」では文字色と背景色ぐらいしか例にあげていませんが、実際には下線の色、枠線の色、影をつける場合など色を指定したい場面は結構多いですし、その配色自体がサイトの印象をプラスにするかマイナスにするかを左右することも多々ありますので、実は結構重要な要素ではないかと思ったりします。

色を使いすぎると、今では伝説となった愛生会病院のホームページみたいになりますし要注意です。

CSSの色指定その1 カラーネーム

一番かんたんなのが名前で直接指定。
red とかblueとか。個人的に好きなのはtomato です。トマト美味しいですよね。

/* カラーネームによる指定例 */
#hoge{
 color : red ;
 background-color : tomato ;
 border: navy 1px solid ;
 box-shadow: 0 0 0 crimson ;
}

ただし、カラーネームによる指定はブラウザによって処理が異なる場合があるので、べたな名前(red blueなど)以外をそのまま使用するのはおすすめしません。

CSSの色指定その2 カラーコード

面倒な説明はすっ飛ばして書くと、6桁の英数字コードで色を指定します。
英数字には0〜9とa〜f の16文字を使います。

たとえば黒なら #000000 。白なら #ffffff です。

カラーコードが一覧になった便利なサイトがあるのでご参照ください。
さきほどのカラーネームや後述のRGB値も併記されています。

/* カラーコードによる指定 */
#hoge{
 color : #ff0000 ;
 background-color : #ff6347 ;
}

8桁のカラーコード

次のRGBA値の項目で一緒にやりますが、6桁のカラーコードに「透明度」を表す2桁の数字を加えた8桁記述もあります。

その3 RGB値

RGBは、Red Green Blue の頭文字です。
色を構成する赤・緑・青 の度合いを0〜255の数値で指定することで1つの色を指定します。
実は先ほどのカラーコードも同じことをしています。6桁のコードは前から2桁ずつ、Red、Green、Blueを表しています。(16個の数字を2つ使うので 256通りの組み合わせが作れますね。)

/* rgbによる指定 */

#hoge{
 color : rgb( 255 , 0 , 0 ) ;
 background-color : rgb( 255 , 99 , 71 ) ;
}

透明度を追記 rgba値

rgb にAlpha (透明度)を加えた4つの数字を指定します。
Aの値は0(= 0% = 完全透明)から1(= 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%刻みで例を載せておきます。

コード透明度
ff100%
e690%
cc80%
b370%
9960%
8050%
6640%
4d30%
3320%
1a10%

たとえばrgba( 0, 0, 0, 0.5)だと、#00000080 と置き換えることもできます。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2019年12月22日HTML/CSScss,カスタマイズ

Posted by ミフネWEB