2016/09/05

まだ間に合う!CSSで色を指定する3つの方法まとめ【お母さんにもできるCSS入門】

1d42d33ccd770453962050b4ec83104e_s

やぁ、昔好きな人夢を見てうなされているユトピ(@Uto60pa)だよ。


お母さん
その好きな人とはどうなったの?

ウト
うるせぞ!!!

お母さん
あらあらかわいそう。。。

ウト
そんな気持ちで今回はCSSでの色の指定方法を勉強していくよ!

お母さん
強引な入りなのね。



CSSはWEBデザインをデザインしていく言語ということは前回学びましたね。
今回はデザインでは欠かせない色についての指定方法についてです。
CSSの色の指定方法は全部で2つあります。その方法を紹介していきます。

それではレツゴー!

色の名前で指定

これは非常に単純。
素直に色の名前で指定します。例えば赤ならred、青ならblueみたいにね。いわゆるカラーネームで指定する方法です。

実際に見ていきましょう。

カラーネームで色を指定しよう!

背景に赤(red)を指定

コード

結果

#box1 背景は赤!

背景にカーキー(khaki)を指定

コード

結果

#box2 背景はカーキー!

背景にシアン(cyan)を指定

コード

結果

#box3 背景はシアン!

このように英語でカラーネームを指定すればその色を出すことができます!
色の種類についてはまとめたページがありますので、そちらを参考に指定するとよさそうですね。

WEB色見本 原色大辞典 - HTMLカラーコード

結構種類があるんですね。今更ながら驚き。
しかしこの指定方法ですと微妙な色の表現ができないデメリットがあります。

そこでそのデメリットを解決できる色の指定方法を見ていきましょう。

カラーコードで指定する


この方法は16進数の数字を使ってRGBそれぞれの色の濃さを指定していく方法です。


お母さん
え?16進数?RGB?なにそれ意味わからないわ。

ウト
え?なにを言ってるかわからない?それじゃそこも解説しましょうかね。


16進数とは?



ウト
僕たちが普段使っている数字って何種類あると思う?

お母さん
1、2、3、4、5、6、7、8、9・・・あと0もかしら?なら10種類ね!

ウト
正解!この10種類数字がある数え方を「10進数」っていうんだよ!


そうなんです。私たちが普段使っている数字の数え方は0から始まって9、9まで行ったら繰り上がって10になりますよね。それがずっと続く感じ。これが10進数です。

しかし!世界には他の数字の数え方が存在します!
今回紹介するのは16進数です。

16進数なので使う文字の数は16個です。


『0・1・2・3・4・5・6・7・8・9・A・B・C・D・E・F』

と、10進数の数字にアルファベットのAからFが加わります。これが16進数です。
数え方は、0から数えて9までいったら、繰り上がらず「A」になります。そのあとB、C、D・・・・と「F」までいったらここで繰り上がって10になります。

そして19の次は1A、1B、1Cとなり1Fの次に20が来ます。
こういった数え方をするのが16進数にですね。


え?なんでこんな数え方をするのかって?

わからん!


16進数はこういう数え方だと頭に入れておいてください。
ちなみに他に0と1しか使わない2進数や、7までしか使わない8進数、12進数なんかもありますよ。12進数は時計のことですね。

RGBって?

RGBとはRED(赤)GREEN(緑)BLUE(青)の略です。いわゆる光の三原色です。

デジタルの画面の色は全部この3色の組み合わせからできています。
例えば赤と緑を混ぜたら黄色になります。そういったことを微妙な調整をしながら色を表現しています。

こんな画像を見たことある人もいると思いますが、これがまさにRGBです。

2000px-AdditiveColorMixiing.svg

この三色を合わせると白になります。

他にも印刷物の場合はRGBではなくCMYKというものが使われています。

C(シアン)M(マゼンタ)Y(イエロー)K(ブラック)で構成されています。
こちらはRGBとは逆で、全部混ぜると黒になります。
CMYKは予備知識として持っていた方がいいですね。

少し話が逸れましたが、いま解説してきたRGBと16進数を合わせてカラーコードを指定します。

カラーコードの指定方法

カラーコードの指定方法は3桁と6桁の指定方法があります。

  • color: #rgb;
  • color: #rrggbb;

左から順番に赤、緑、青の濃さを16進数で指定していきます。
6桁の場合はより細かい指定ができるので、より多くの色表現をすることができます。

実際にやってみましょう。

カラーコードを使ってみよう!

背景に赤(#FF0000)を指定

コード

結果

#box4 赤はカラーコードで#FF0000!

背景にベージュ(#F5F5DC)を指定

コード

結果

#box5 ベージュはカラーコードで#F5F5DC!

背景に明るい青緑っぽい色を指定

コード

結果

#box6 明るい青緑っぽいはカラーコードで#00f79c!

こんな感じでカラーコードが指定できました。
最後のは名前の無い色の指定ですね。このように細かい色を表現することができます。

ただ自分で16進数の数字を打っていくのはあまり現実的ではないですね。
なので、カラービッカーを使って感覚的に色を指定して、その色を自動で16進数に変換してもらった方が断然早いので、カラーコードを使う場合はこちらのリンクを活用しましょう。

カラーピッカー - 原色大辞典

rgbで指定する

これは先ほどのカラーコードと似ていますが、16進数は使いません。
ここで使う数字はRGBの3色の濃さ0~255、またはパーセント(0~100%)で表したものを使用します。

特殊な指定方法かもしれませんが、基本的には先ほど紹介したカラービッカーを使えば数値を取得することができます。
例えば、R:255、G:255、B:255だと白になります。

rgbの指定方法は赤・緑・青の濃さを指定します。

  • color: rgb(r,g,b);
  • color: rgb(0%,0%,0%);

それでは実際にやってみましょう。


rgbで指定しよう!

背景に赤(R:255、G:0、B:0)を指定

コード

結果

#box7 赤はR:255、G:0、B:0だよー!

背景のオレンジ(R:255 G:165 B:0)を指定

コード

結果

#box8 オレンジはR:255 G:165 B:0だよー!

背景に黄色っぽい色(R:187 G:193 B:67)を指定

コード

結果

#box9 黄色っぽい色はR:255 G:165 B:0だよー!

背景に赤(R:100%、G:0%、B:0%)を指定

コード

結果

#box10 赤は%指定でR:100%、G:0%、B:0%だよー!

こんな感じになりましたね。
こちらも細かい色の表現ができますね。たた個人的にはパーセントでの指定はあまりしないですね。
カラービッカーで変換される数値も0~255のことが多いので、使い勝手的には数値での指定をオススメします。

rgbは透明度も指定できる「rgba」がある!

ここでrgbでの指定方法のもう一つの機能のご紹介。
rgbには色と同時に透明度を指定することができるrgbaというものがあります。

透明度とは色を指定した要素の透明さのこと。
rgbaの最後の「a」はalpha(アルファ)=透過度・アルファ値を表したものです。

0~1の範囲で小数点を使って指定します。
例えば0は完全に透明、つまり見えないくなります。1は不透明なので見えます。0.5は半透明になります。
そんな感じで透明度を指定していきます。

それでは実際に見ていきましょう。

rgbaを指定しよう!

背景赤で、aを1に指定

コード

結果

#box11 透明度は1だよ!

背景赤で、aを0.5に指定

コード

結果

#box12 透明度は0.5だよ!半透明だね!

背景赤で、aを0に指定

コード

結果

#box13 透明度は0だよ!透明だね!

どうです?どんどん透明になっていきましたね。

最後のデモは赤を指定していますが、完全に消えています。背景のプロパティであるbacakgroundに透明度を指定したので、背景だけ消えましたね。

これは色を指定できるプロパティ(colorやborderなど)なら全部に指定できます。表現の幅が非常に広がるので、ぜひ使ってみましょう。

注意点


ここまでいろいろな色の表現についてみてきましたが、1つ注意点があります。
特にカラーコードなどの細かい色の指定ができるものについてですが、PCの画面に表示されている色は他のPCやスマホなどで見た時に全く同じ色になるかというと、必ずしもそうではないです。

OSやモニターの仕様などで色味がすこし違って見えることがありますので、そうならないために珍しい色を使ったときはできるだけ他のPCやスマホなどで確認してみることをオススメします。

まとめ

以上が基本的なCSSでの色の指定方法です。
さまざまな方法がありましたが、この中で一番メジャーなのはカラーコードの指定ですかね。個人的にもよく使っています。
しかし場合によってはカラーネームの方が楽だったり、rgbaで透明度の指定をしたりしますので、全部覚えておいても使いどころは結構ありますよ。

CSSは色の表現が本当に幅広いのでカラーをまとめたサイトなどで、どんな色があるのかを見てみるのもオススメします!
それでは今回はこのへんでさいならだ!



質問や意見がありましたらお気軽にツイッターの方へどうぞ。


ユトピのツイッター
@Uto60pa