Webエンジニア学習日記 CSS編 #05 「色の書き方」

2023年5月2日

CSS

eyecatch CSSは装飾を記述するプログラムです。 装飾と聞くと見た目のデザインと色が頭に浮かぶと思います。 今回はその色の書き方について、CSSでの値の書き方を学習していきたいと思います。

cssの色について

cssで色を値に書き込むプロパティ達
color : 文字の色 background-color : 背景色 border-color : 線(border)の色
上記を見て分かる通り、○○-colorというプロパティの場合、値は色について書きます。 他にも、色を記述するプロパティには、次のようなものがあります。
box-shadow : 要素の影を表示する命令 fill : svgの内部を塗りつぶす命令 linear-gradient(background) : グラデーションの命令
あまり多くはないのですが、重要なのは、色の値の書き方をしっかりと理解しているだけで、これらの書き方はさほど難しくないでしょう。

色の書き方パターン

cssでの色の値の書き方は、大きく分けて2パターンあります。

色の書き方パターン1 : 色名称で書く

頭に浮かんだ色名称(英語)で、簡易に書くことができます。
white
black
gray
silver
maroon
red
brown
navy
blue
skyblue
aqua
green
teal
lime
yellow
purple
pink
orange
tan
sienna
olive
chocolate
peru
violet
tomato
plum
cyan
gold
khaki
snow
ivory
他にもたくさんの色名称があります。

色の書き方パターン2 : 色のRGBコードで書く

デジタルの色は、光の3原色のRGBで表されます。
R : Red G : Green B : Blue
RGBコードというのは、3つの色をそれぞれ、0~255の数字で書く書き方です。
Red(赤)は、rgb(255 , 0 , 0) Green(緑)は、rgb(0 , 255 , 0) Blue(青)は、rgb(0 , 0 , 255)
なんとなく法則が分かりますね。 rgb()という命令の中に、赤、緑、青の順番に、0から255の数値を入れるだけです。 数値は、255が一番強い色になり、0は無色の扱いになります。
白 : rgb(0 , 0 , 0) 黒 : rgb(255 , 255 , 255) 黄色 : rgb(255 , 255 , 0) オレンジ : rgb(255 , 128 , 0) 灰色 : rgb(128 , 128 , 128)
下の色をクリックすると、カラーピッカーが表示されるので、rgbの数値を変えたり、スライダーをイジって確認してみてください。 ※safariの場合は、「カラーパネルを表示」や「スライダ」をクリックしてみてください。

色の書き方パターン3 : 色の16進数コードで書く

パターン2は、256の数値で書きましたが、それを16進数で書くこともできます。 この書き方が恐らくcssでは、一番使われているので、ちゃんと理解しましょう。 書き方は、比較的カンタンで、先頭に#を付けて、RGBの16進数を続けて書きます。 ※16進数が分からない人は、下記の16進数についてを参考にしてください。
白 : #FFFFFF 黒 : #000000 赤 : #FF0000 緑 : #00FF00 青 : #0000FF 黄色 : #FFFF00 オレンジ : #FF8800 灰色 : #888888

16進数について

学校の算数などで習った数値は、0~9を1桁として考える10進数です。 16進数は、0~9A~Fの16段階を1桁として考える、数値の表し方です。
10進数16進数
00
11
22
33
44
55
66
77
88
99
10A
11B
12C
13D
14E
15F
16進数の1桁の値は上記のようになりますが、10進数の16は、16進数ではどうなるでしょうか? 正解は、
10
です。 16毎に桁が繰り上がるので、16進数での10は、10進数の16なんですね。 ※これちょっとややこしいと思いますが、次の桁の10進数との対応表を書くとなんとなく分かるはずです。
10進数16進数
1610
1711
1812
1913
2014
2115
2216
2317
2418
2519
261A
271B
281C
291D
301E
311F
そして、10進数の255は、16進数では、FFとなります。 なかなか慣れないと16進数を頭で計算するのは難しいと思いますが、 パソコンやスマホの電卓アプリで、16進数変換する機能があるので、慣れるまでは使ってみるといいでしょう。 あと、何で10進数で考えたほうがわかりやすいのに、16進数で書かなければ行けないかと言うと、 16と言う数値は、2の3乗ということで、2のべき乗は、コンピュータが理解しやすい数値だからです。 ちなみに、255は、2の8乗です。

あとがき

cssにおいて、色を自由に作れる事は非常に重要な作業効率に繋がります。 ネットでカラーピッカーと検索すると、いろいろなサイトで、ピッカーツールが無料で提供されていますが、他のサイトのCSS色を自分で判別できるようになる(読み取る)というのも効率化です。 サイトの色味が気に入った時に、色の確認をする癖を着けると、ホームページにおける色の使い方などのデザイン思考が、学習できると思いますよ。 自分で考えた色が、cssで作り出す事ができるようになると、素敵なデザインのホームページが作りやすくなるという事ですね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。