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

 

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

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

それではレツゴー！
 
 

色の名前で指定

 

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

 

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

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

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

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

カラーコードで指定する

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

 
 

16進数とは？

 
 

 
 

そうなんです。私たちが普段使っている数字の数え方は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です。
 

 

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

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

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

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

カラーコードの指定方法

 

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

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

 

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

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

 

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

ただ自分で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%);

 

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

 
 

 

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

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

 

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

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

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