【初心者向け】色に関するプロパティと値 rgbaとは？カラーコードとは？【CSS】

こばゆた

CSSで色を変える時はcolorプロパティを使いますが、その値の指定方法には種類があり、特徴もそれぞれあります

きなこ

ただ”red”とか”blue”で指定する意外にもあるんだ！

チャッピー

そうなんだ

どういうものがあるの？

こばゆた

では今回はその辺りを見ていこうと思いますが、その前に色に関するプロパティの指定方法から先に説明します

1.文字色”color”

文字色を変えるにはcolorプロパティを使います。

セレクター{
 color: 色の指定;
}

<p>こんにちは</p>

p{
 color: red; /*p要素の文字色を赤に*/
}

こばゆた

無問題ですね

2.背景色”background-color”

プロパティ名から予想がつくと思いますが背景色をつけるにはbackground-colorプロパティを使います。

セレクター{
 background-color: 色の指定;
}

<p>こんにちは</p>

p{
 background-color: pink; /*p要素の背景色をピンクに*/
}

3.色の指定方法

こばゆた

ここからが本題の色の指定方法です

3-1.色の名前で指定する

文字通り赤にしたければ値を”red“に、青なら”blue“などといったように英語で任意の色名をそのまま記入します。

こちらのサイトに色名(カラーネーム)がまとめられているので参考にして下さい。

カラーネーム140色－WEBカラーリファレンス

...

www.htmq.com

メリットとしては短いカラーネーム(“red”とか”pink”)を使うと、レイアウトの際などのとりあえず色分けをする時に使うと簡単に書けるので楽です。

<p>こんにちは</p>

p{
 color: red;
}

3-2.rgba()で指定する

rgbaとは、Red,Green,Blue,Alphaの頭文字をとったものです。

rgbの数値は0〜255まであり0が最も暗く、255が一番明るくなります。

Alphaとは透明度を意味し、0〜1.0の範囲で0にすると透明になり、1.0にすると非透明となります。

また“a”は必要がなければ省略でき、rgb()で指定することもできます。

この透明度を指定できる事がrgbaで指定する事が最大の特徴です。

左から赤、緑、青の値を設定していきます。

ちなみにrgbの値をそれぞれ(255,255,255)にすると白、(0,0,0)にすると黒になります。

<p>こんにちは</p>

p{
 color: rgba(255, 0 , 0 ,0.5);
}

3-3.カラーコードで指定する

こちらも左から赤、緑、青の並びで０〜９,a〜fの16進数で指定します。

0が一番暗く、数値が上がるほど明るくなり、fが一番明るくなります。

書き方は#を最初に書き二桁の数字と英字で表します。

こちらは#000000だと黒、#ffffffだと白になります。

また同じ数値が連続する場合は省略でき、#000000なら#000、#ffffffなら#fffと省略することができます。

<p>こんにちは</p>

p{
 color: #f00;
}

4.まとめ

セレクター{
 color: 色の指定;
}

セレクター{
 background-color: 色の指定;
}

セレクター{
 color: red;
}

セレクター{
 color: rgba(255, 0, 0, 0);
}

セレクター{
 color: #f00;
}