【CSS入門】 文字や背景の色を変えるには
テキストや背景などの色を指定する際は、色の名前だけでなく、カラーコードという値やRGBA値も用います。
様々な色の付け方を見ていきましょう!
文字色を指定
colorプロパティを使用します。
色の種類
色は、名前で指定、#ff6e6eのようなカラーコードで指定、rgba(255, 128, 128, 0.3)のようなRGBA値での指定などがあります。
色名で指定
一部の色は, 色の名前で指定できます.
- red, blue, yellow
- white, silver, gray, black
- 他, navy, teal, green, lime, aqua, fuchsia, olive, purple, maroon
指定する際は、値に色の名前を入れます。
p {
color: red;
}
a {
color: black;
}
プログラミング言語でよくあるダブルクォーテーションなどは不要です。
RGBAで指定
赤、緑、青の色の強さと不透明度を指定します。
1つ目が赤、2つ目が緑、3つ目が青、4つ目がアルファで、赤緑青は0~255、不透明度は0~1で指定します。
.a {
color: rgba(255, 255, 255, 1); /* 普通の真っ白 */
}
.b {
color: rgba(255, 255, 255, 0.5); /* 白色で半透明 */
}
.c {
color: rgba(128, 255, 255, 0.1); /* ほとんど透明な水色 */
}
.d {
color: rgba(196, 96, 32, 0.9); /* ほとんど不透明な暗めのオレンジ */
}
透明度が不要な場合、rgbでも指定できます。rgb(128, 255, 255)のようになります。
また、rgb(0 0 0 / 20%)のような書き方も見られます。rgbをカンマではなくスペースで区切り、最後に/の後に不透明度をパーセンテージで指定しています。開発者ツールで表示したときはこの書き方になっています。
色の混ざり方は光の三原色と同じです。
カラーコードで指定
#ffffffのように、#に続けて16進数で指定します。最初の2桁は赤、中2桁は緑、後ろ2桁は青色の値です。つまり、#RRGGBBという形です。
これが最も一般的な色の指定方法です。
16進数は、1つの桁で0~15の16種類の数値を表現できる方法です。10=a、11=b、12=c、13=d、14=e、15=fで表現します。
3cの場合、10進数に直すと3*16 + 12 = 60です。ffの場合、15*16 + 15 = 255です。a3bなら、10*16^2 + 3*16^1 + 11*16^0 = 2620です。
ff(255)とするとその色の出力がMAXになり、00ならその色の出力はありません。
#ffffffはすべてff(255)であるため、白です (光の三原色をすべて合わせたら白くなる)#000000はすべて00であるため、黒です (すべての色の出力が0)#ff0000は, 赤がff(255)で最大出力、他2色が0なので赤色です#555555は, すべて55 (10進数で85) です。最大が255なので、暗めの灰色になります#ffff00は, 赤と緑が最大出力、青が0なので、黄色になります#062e2eは、赤が6、緑と青が2e (10進数で46) なので、暗い青緑っぽい色になります
現在は7, 8桁目にも値を入れることができ、その値は不透明度になります。例えば、#ffff0030とすれば透明に近い黄色になります。しかし、この8桁の書き方は一般的ではありません。
また、カラーコードは3桁の省略が可能です。
#fff=#ffffff#345=#334455#a5c=#aa55cc#000=#000000
のように、3桁で表記すると、それぞれの桁が複製されるような感じになります。
背景色の変更
背景色は、background-colorで変更できます。文字列の一部だけをタグで囲み、そこにbackground-colorを指定すれば、文字のハイライトができます。
文字の背景色を変えたいだけならspanを推奨します。
spanタグは、意味を持たないタグです。そのため、汎用的に使うことができます。
また、pやdivのような要素を対象にすると、それ全体の背景色が変わります。
See the Pen css background-color by Totori (@souki202) on CodePen.
まとめ
colorやbackground-colorというプロパティもそうですが、色の値の書き方が特に重要です。0~255の範囲で色を指定するという方法は、CSS以外でもデザイン系全般で利用されています。この表現方法に慣れていきましょう!
