CSSで色指定の方法と種類に関して

トモジ

CSSの色設定ってどうやるの・・・？

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、色の設定に関して要点をわかりやすく説明しております。

1.CSSで色指定の方法

今回の色指定は
文字色と背景色に関して説明します。

文字色の指定

文字色を変更する場合は
colorプロパティを使用します。

<p>文字の色を変更する</p>

p{color: red;}

背景色の指定

背景色は、文字や画像・エリアなどの周りの
色を変更する場合に必要になり
background-colorプロパティを使用します。

<p>文字の背景色を変更する</p>

p{background-color: red;}

2.色指定の方法8種類

色指定には8種類の方法がありますので、
種類について確認しましょう。

① 16進数で指定(パターン1)
[#RRGGBB形式]

先頭に#をつけてRGB(Red,Green,Blue)の割合を16進数で指定します。

<p>色指定の方法(パターン1) [ #RRGGBB形式 ]</p>

p{color: #ff0000;}

あわせて読みたい

2進数・8進数・10進数・16進数に関して【2進数・8進数・16進数に関して】一般的には、10進数(通常の数え方)が使われていますがプログラミングでは2進数や16進数を使う機会がありますので順番に説明していきま…

② 16進数で指定(パターン2)
[#RGB形式]

先ほどの指定方法に似ていますが、
今回は#のあとは3文字しか使用できなく
同じ値を続けた数値と解釈されます。

例えば#123は、
#RRGGBB形式で#112233

<p>色指定の方法(パターン2) [ #RGB形式 ]</p>

p{color: #f00;}

③ 10進数で指定
[rgb(n,n,n)形式]

rgb内のn値(red,green,blue)を0〜255の範囲内で指定します。

<p>色指定の方法 [ rgb(n,n,n)形式 ]</p>

p{color: color: rgb(250,0,0);}

④ ％で指定
[rgb(n%,n%,n%)形式]

rgb内のn値(red,green,blue)を0%〜100%の範囲内で指定します。

<p>色指定の方法 [ rgb(n%,n%,n%)形式 ]</p>

p{color: color: rgb(100%,0%,0%);}

⑤ 10進数と透明度で指定
[rgba(n,n,n,a)形式]

rgb(n,n,n)形式に透明度(a=alpha)を加えた形式になり、aは０(透明)〜１(不透明)の範囲で値が指定できます。

<p>色指定の方法 [ rgba(n,n,n,a)形式 ]</p>

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

⑥ 色相・彩度・明度で指定
[hsl(n,n%,n%)形式]

hslとはhue(色相)・saturation(彩度)・lightness(明度)で色を指定する形式になります。

<p>色指定の方法 [ hsl(n,n%,n%)形式 ]</p>

p{color: color: hsl(0,100%,50%);}

⑦ 色相・彩度・明度と透明度で指定
[hsla(n,n%,n%,a)形式]

hls(n,n%,n%)形式に透明度(a=alpha)を加えた形式になり、aは０(透明)〜１(不透明)の範囲で値が指定できます。

<p>色指定の方法 [ hsla(n,n%,n%,a)形式 ]</p>

p{color: color: hsla(0,100%,50%,0.5);}

⑧ 色の名前で指定

カラーネームで色を指定する形式になります。

<p>色指定の方法 [ 色の名前で指定 ]</p>

p{color: color: red;}

3.便利なサイトやツール

今回紹介するのは、
とてもおしゃれなグラデーションカラーが
簡単に作成できるサイトと
気になったカラーコードを簡単に取得できる便利ツールの2つになります。

WebGradients

こちらのサイトを利用すると、
とてもおしゃれなボタンなどが簡単に作成できますので
使い方に関して説明します。

気になったカラーの右下にある[Copy CSS]をクリックして、自身のCSSに貼り付ければ完了

<p>WebGradientsサイトの使い方</p>

p{background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)};

linear-gradientとは？

二つ以上の色の間で連続的な直線の変化から構成される画像を生成でき、
色の開始点と終了点の間は自動的にカラーが生成されます。

ColorPick Eyedropper

ColorPick Eyedropperとは、
Chromeの拡張機能で使用することができます。

STEP

Chromeウェブストアにアクセスし、[Chromeに追加]をクリック

STEP

[拡張機能を追加]をクリックする

STEP

ヘッダーメニューのColorPick Eyedropperをクリックし、気になる色をクリック

まとめ

今回は、CSSで色指定の方法と種類に関しての説明しました。