CSS・CSS入門・WEBやぁ、昔好きな人夢を見てうなされているユトピ(@Uto60pa)だよ。お母さんその好きな人とはどうなったの?ウトうるせぞ!!!お母さんあらあらかわいそう。ウトそんな気持ちで今回はCSSでの色の指定方法を勉強していくよ!お母さん強引な入りなのね。CSSはWEBデザインをデザインしていく言語ということは前回学びましたね。今回はデザインでは欠かせない色についての指定方法についてです。CSSの色の指定方法は全部で2つあります。その方法を紹介していきます。まとめ色の名前で指定これは非常に単純。素直に色の名前で指定します。赤ならred、青ならblueみたいにね。いわゆるカラーネームで指定する方法です。実際に見ていきましょう。背景はシアン!このように英語でカラーネームを指定すればその色を出すことができます!色の種類についてはまとめたページがありますので、そちらを参考に指定するとよさそうですね。HTMLカラーコード結構種類があるんですね。この指定方法ですと微妙な色の表現ができないデメリットがあります。そこでそのデメリットを解決できる色の指定方法を見ていきましょう。カラーコードで指定するこの方法は16進数の数字を使ってRGBそれぞれの色の濃さを指定していく方法です。お母さんえ?16進数?RGB?なにそれ意味わからないわ。ウトえ?なにを言ってるかわからない?それじゃそこも解説しましょうかね。16進数とは?ウト僕たちが普段使っている数字って何種類あると思う?お母さん1、2、3、4、5、6、7、8、9・・・あと0もかしら?なら10種類ね!ウト正解!この10種類数字がある数え方を「10進数」っていうんだよ!そうなんです。私たちが普段使っている数字の数え方は0から始まって9、9まで行ったら繰り上がって10になりますよね。それがずっと続く感じ。!世界には他の数字の数え方が存在します!今回紹介するのは16進数です。16進数なので使う文字の数は16個です。『0・1・2・3・4・5・6・7・8・9・A・B・C・D・E・F』と、10進数の数字にアルファベットのAからFが加わります。数え方は、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桁の指定方法があります。#rrggbb;左から順番に赤、緑、青の濃さを16進数で指定していきます。6桁の場合はより細かい指定ができるので、より多くの色表現をすることができます。実際にやってみましょう。明るい青緑っぽいはカラーコードで#00f79c!こんな感じでカラーコードが指定できました。最後のは名前の無い色の指定ですね。このように細かい色を表現することができます。自分で16進数の数字を打っていくのはあまり現実的ではないですね。カラービッカーを使って感覚的に色を指定して、その色を自動で16進数に変換してもらった方が断然早いので、カラーコードを使う場合はこちらのリンクを活用しましょう。原色大辞典rgbで指定するこれは先ほどのカラーコードと似ていますが、16進数は使いません。ここで使う数字はRGBの3色の濃さを0~255、またはパーセント(0~100%)で表したものを使用します。特殊な指定方法かもしれませんが、基本的には先ほど紹介したカラービッカーを使えば数値を取得することができます。R:255、G:255、B:255だと白になります。rgbの指定方法は赤・緑・青の濃さを指定します。rgb(0%,0%,0%);それでは実際にやってみましょう。赤は%指定でR:100%、G:0%、B:0%だよー!こんな感じになりましたね。こちらも細かい色の表現ができますね。個人的にはパーセントでの指定はあまりしないですね。カラービッカーで変換される数値も0~255のことが多いので、使い勝手的には数値での指定をオススメします。rgbは透明度も指定できる「rgba」がある!ここでrgbでの指定方法のもう一つの機能のご紹介。rgbには色と同時に透明度を指定することができるrgbaというものがあります。透明度とは色を指定した要素の透明さのこと。rgbaの最後の「a」はalpha(アルファ)=透過度・アルファ値を表したものです。0~1の範囲で小数点を使って指定します。0は完全に透明、つまり見えないくなります。1は不透明なので見えます。0.5は半透明になります。そんな感じで透明度を指定していきます。それでは実際に見ていきましょう。透明度は0だよ!透明だね!どうです?どんどん透明になっていきましたね。最後のデモは赤を指定していますが、完全に消えています。背景のプロパティであるbacakgroundに透明度を指定したので、背景だけ消えましたね。これは色を指定できるプロパティ(colorやborderなど)なら全部に指定できます。表現の幅が非常に広がるので、ぜひ使ってみましょう。注意点ここまでいろいろな色の表現についてみてきましたが、1つ注意点があります。カラーコードなどの細かい色の指定ができるものについてですが、PCの画面に表示されている色は他のPCやスマホなどで見た時に全く同じ色になるかというと、必ずしもそうではないです。OSやモニターの仕様などで色味がすこし違って見えることがありますので、そうならないために珍しい色を使ったときはできるだけ他のPCやスマホなどで確認してみることをオススメします。まとめ以上が基本的なCSSでの色の指定方法です。さまざまな方法がありましたが、この中で一番メジャーなのはカラーコードの指定ですかね。個人的にもよく使っています。場合によってはカラーネームの方が楽だったり、rgbaで透明度の指定をしたりしますので、全部覚えておいても使いどころは結構ありますよ。CSSは色の表現が本当に幅広いのでカラーをまとめたサイトなどで、どんな色があるのかを見てみるのもオススメします!それでは今回はこのへんでさいならだ!質問や意見がありましたらお気軽にツイッターの方へどうぞ。コメントをキャンセルメールアドレスが公開されることはありません。