CSSのcolorをrgb指定する方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSのcolorをrgb指定する方法について解説しています。色を指定するとき、カラーネームやカラーコードの他にRGBカラーモデルを使って記述することができます。RGBの記述方法、参照方法について見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSのcolorをrgb指定する方法について解説します。rgb設定ができるようになると、細かな色彩を指定できるようになるので、表現の幅が増えたりサイトデザインを自社カラーに近いものにできたりできます。ぜひ参考にしてみてください。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
colorをrgb指定する方法について詳しく説明していくね！
お願いします！
色の指定方法
CSSで色を指定するには、いくつかの方法があります。
カラーネーム
あらかじめ決められている色の名前で指定することができます。redやblueなどの誰でもすぐにわかる名称のものや、tomatoやorangeなど様々な名称が割り当てられています。色から名前を連想しやすいので使いやすいですね。
red gold tomato limegreen
カラーコード
16進数で色を表現します。16進数とは0~9までの数字とA〜Fまでのアルファベットの組み合わせです。カラーネームよりも指定できる色が多くなります。
#FF0000 #FFD700 #FF6347 #32CD32
RGBカラーモデル
red,green,blueの3色を混ぜて、色を表現します。
rgb(255,0,0) rgb(255,215,0) rgb(255,99,71) rgb(50,205,50)
rgbの記述方法
rgbカラーモデルでは、Red、Green、Blueの色の割合を0〜255で指定し、下記のように書きます。
/*rgb(Redの割合,Greenの割合,Blueの割合)*/ rgb(255,0,0) //赤 rgb(0,255,0) //緑 rgb(0,0,255) //青 rgb(0,0,0) //黒 rgb(255,255,255) //白
絵の具などをイメージした場合、色をたくさん混ぜると暗なっていくというように思いますが、上の例のように黒はrgb(0,0,0)、白は(255,255,255)となり、RGBでは反対になります。
とはいえ、数値を見ただけで色がわかる必要もありませんので、Googleで検索したり、Photoshopなどのツールで色を調べながら使っていきましょう。
Googleで16進数のカラーコードを検索すれば、カラーピッカーが出てきます。RGBの値やカラーコードをすぐに調べることができます。
以下のサイトでも、カラーコードやカラーネームを調べることができます。
原色大辞典： https://www.colordic.org/
HTMLリファレンス： http://www.htmq.com/color/colorname.shtml
色を様々な方法で指定してみよう
それでは、いろんな指定方法で文字色を指定してみましょう。
<html> <head> <meta charset="utf-8"> <title>色を様々な方法で指定してみよう</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="box1">rgb(255, 200, 0)</div> <div class="box2">rgb(100, 100, 100)</div> <div class="box3">rgb(150, 200, 100)</div> <div class="box4">tomato</div> <div class="box5">olive</div> <div class="box6">#33debc</div> </body> </html>
CSS：
div{
width:300px;
height:200px;
float:left;
font-size:20px;
text-align:center;
line-height:200px;
color:#fff;
}
.box1{
background:rgb(255, 200, 0);
}
.box2{
background:rgb(100, 100, 100);
}
.box3{
background:rgb(150, 200, 100);
}
.box4{
background:tomato;
}
.box5{
background:olive;
}
.box6{
background:#33debc;
}
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
