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コードで書く
デジタルの色は、光の３原色のRGBで表されます。
R : Red
G : Green
B : Blue
RGBコードというのは、３つの色をそれぞれ、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進数コードで書く
パターン２は、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段階を１桁として考える、数値の表し方です。
| １０進数 | 16進数 |
|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
16進数の1桁の値は上記のようになりますが、10進数の16は、16進数ではどうなるでしょうか？
正解は、
10
です。
16毎に桁が繰り上がるので、16進数での10は、10進数の16なんですね。
※これちょっとややこしいと思いますが、次の桁の10進数との対応表を書くとなんとなく分かるはずです。
| １０進数 | 16進数 |
|---|
| 16 | 10 |
| 17 | 11 |
| 18 | 12 |
| 19 | 13 |
| 20 | 14 |
| 21 | 15 |
| 22 | 16 |
| 23 | 17 |
| 24 | 18 |
| 25 | 19 |
| 26 | 1A |
| 27 | 1B |
| 28 | 1C |
| 29 | 1D |
| 30 | 1E |
| 31 | 1F |
そして、10進数の255は、16進数では、FFとなります。
なかなか慣れないと16進数を頭で計算するのは難しいと思いますが、
パソコンやスマホの電卓アプリで、16進数変換する機能があるので、慣れるまでは使ってみるといいでしょう。
あと、何で10進数で考えたほうがわかりやすいのに、16進数で書かなければ行けないかと言うと、
16と言う数値は、2の3乗ということで、2のべき乗は、コンピュータが理解しやすい数値だからです。
ちなみに、255は、2の8乗です。
あとがき
cssにおいて、色を自由に作れる事は非常に重要な作業効率に繋がります。
ネットでカラーピッカーと検索すると、いろいろなサイトで、ピッカーツールが無料で提供されていますが、他のサイトのCSS色を自分で判別できるようになる（読み取る）というのも効率化です。
サイトの色味が気に入った時に、色の確認をする癖を着けると、ホームページにおける色の使い方などのデザイン思考が、学習できると思いますよ。
自分で考えた色が、cssで作り出す事ができるようになると、素敵なデザインのホームページが作りやすくなるという事ですね。
0 件のコメント:
コメントを投稿