2022.7.4|コーディング

CSSで文字や背景や枠線に色を指定する4つの指定方法

CSSで文字や背景や枠線に色を指定する4つの指定方法

CSSでは、文字や背景や枠線などの要素に色を指定することができます。

今回は、CSSで文字や背景や枠線に色を指定する4つの指定方法を解説します。

文字や背景や枠線の基本HTML

CSSで文字や背景や枠線の要素に色を指定する前に基本となるHTMLを記述します。

文字のHTMLコード

文字を表すHTMLコードを記述し、HTMLに対してCSSで要素を設定します。
文字の要素に色を指定するには「color」要素を記述します。

文字のhtmlコード
文字htmlコード
<div class="sample01">文字のhtmlコード</div>
文字cssコード
.sample01 {
  color: #0060ff;
  text-align:  center; 
}

背景のHTMLコード

背景を表すHTMLコードを記述し、HTMLに対してCSSで要素を設定します。
背景の要素に色を指定するには「background-color」要素を記述します。

背景のhtmlコード
背景htmlコード
<div class="title02"><h4>背景のHTMLコード</h4></div>
背景cssコード
.sample02 {
  color: #fff;
  text-align:  center;
  padding:  70px;
  background-color: #0060ff;
}

枠線のHTMLコード

枠線を表すHTMLコードを記述し、HTMLに対してCSSで要素を設定します。
枠線の要素に色を指定するには「border-color」要素を記述します。

枠線のhtmlコード
枠線htmlコード
<div class="sample03">枠線のhtmlコード</div>
枠線cssコード
.sample03 {
  text-align:  center;  
  padding:  70px;
  border: solid 10px;
  border-color: #0060ff;
}

CSSで文字や背景や枠線に色を指定する4つの指定方法

CSSで文字や背景や枠線に色を指定するには、「カラー名」「16進数カラーコード」「RGB」「HSL」の4つの方法で指定することができます。CSSで色をしているする場合、色を表す要素に4つの指定方法でプロバティに記述します。

【色を指定する4つの指定方法】
・カラー名で指定
・16進数カラーコードで指定
・RGBで指定
・HSLで指定

カラー名で指定

「カラー名」を指定する場合は、あらかじめ「red」「blue」「black」のように、プロバティで指定するカラー名が用意されています。用意されている「カラー名」は限られていますが、色の名前で直接記述できるので分かりやすいのが特徴です。

カラー名cssコード
/* 赤を指定 */
.sample {
  border-color: #red;
}

/* ゴールドを指定 */
.sample {
  border-color: #gold;
}

/* ライトブルーを指定 */
.sample {
  border-color: #lightblue;
}
カラー名サンプル(一部)
カラー名 色サンプル
black
red
green
blue
white
aqua
navy
lime

16進数カラーコードで指定

「16進数カラーコード」を指定する場合は、「#ff0000」「#000000」「#ffffff」のように、プロバティに「#+16進数のカラーコード」を指定します。
「16進数」は、「Photoshop」や「Illustrator」などデザインソフトで利用される色の形式です。「16進数カラーコード」は、色の限界がほぼ無いので、微調整ができるのが特徴です。

16進数カラーcssコード
/* 赤を指定 */
.sample {
  border-color: #ff0000;
}

/* 黒を指定 */
.sample {
  border-color: #000000;
}

/* 白を指定 */
.sample {
  border-color: #ffffff;
}
16進数カラーコードサンプル(一部)
16進数カラーコード 色サンプル
黒:#000000
赤:#ff0000
緑:#029c35
青:#004ccb
白:#ffffff
水色:#009cff
紫:#b402e7
オレンジ:#ff4e00

RGBで指定

「RGB」を指定する場合は、「255,0,0」「0,0,0」「255,255,255」のように、プロバティに「0~255までの数値」を指定します。「RGB」は、光の3原色である「Red」「Green」「Blue」の値の組み合わせで色を指定する方法です。 「RGB」は、色の限界がほぼ無いので、微調整ができるのが特徴です。
また、色を透過させるには「rgba」を指定し、「255,255,255,0.7」のように、最後に「0.0~1.0」までの数値を追加することで透明度を指定できます。

RGBcssコード
/* 赤を指定 */
.sample {
  border-color: rgb(255, 0, 0);
}

/* 黒を指定 */
.sample {
  border-color: rgb(0, 0, 0);
}

/* 白を指定 */
.sample {
  border-color: rgb(255, 255, 255);
}
RGBサンプル(一部)
RGBコード 色サンプル
黒:rgb(0, 0, 0)
赤:rgb(255, 0, 0)
緑:rgb(34, 123, 3)
青:rgb(0, 66, 255)
白:rgb(255, 255, 255)
水色:rgb(0, 180, 255)
紫:rgb(234, 0, 154)
オレンジ:rgb(255, 126, 0)

HSLで指定

「HSL」を指定する場合は、「0,100%,50%」「0,0%,0%」「62,0%,100%」のように、プロバティに「色相:Hue」「彩度:Saturation」「輝度:Lightness」の3つの数値を指定します。3つの数値はそれぞれ指定する単位が異なり「色相:0~360」「彩度:0~100%」「輝度:0~100%」と指定します。
「HSL」は、色の限界がほぼ無いので、微調整ができるのが特徴です。
また、色を透過させるには「hlsa」を指定し、「31,0%,0%,0.7」のように、最後に「0.0~1.0」までの数値を追加することで透明度を指定できます。

HSLcssコード
/* 赤を指定 */
.sample {
  border-color: hsl(0,100%,50%);
}

/* 黒を指定 */
.sample {
  border-color: hsl(0, 100%, 0);
}

/* 白を指定 */
.sample {
  border-color: hsl(0, 100%, 100%);
}
HSLサンプル(一部)
HSLコード 色サンプル
黒:hsl(0, 100%, 0)
赤:hsl(0, 100%, 50%)
緑:hsl(120, 100%, 50%)
青:hsl(240, 100%, 50%)
白:hsl(0, 100%, 100%)
水色:hsl(180, 100%, 50%)
紫:hsl(248,38%, 39%)
オレンジ:hsl(38, 100%, 50%)

まとめ

色の指定方法はデザイナーやコーダーによって異なります。4つの方法を試してみて、1番設定しやすい方法を選択しましょう。色の指定方法は難しくないので色見本など掲載しているサイトもありますので色んな色を見て活用してみましょう。