Webデザイナーブログから学ぶホームページ制作

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

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

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

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

<div class="sample01">文字のhtmlコード</div>

.sample01 {
  color: #0060ff;
  text-align:  center; 
}

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

<div class="title02"><h4>背景のHTMLコード</h4></div>

.sample02 {
  color: #fff;
  text-align:  center;
  padding:  70px;
  background-color: #0060ff;
}

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

<div class="sample03">枠線のhtmlコード</div>

.sample03 {
  text-align:  center;  
  padding:  70px;
  border: solid 10px;
  border-color: #0060ff;
}

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

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

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

/* 赤を指定 */
.sample {
  border-color: red;
}

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

/* ライトブルーを指定 */
.sample {
  border-color: lightblue;
}

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

/* 赤を指定 */
.sample {
  border-color: #ff0000;
}

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

/* 白を指定 */
.sample {
  border-color: #ffffff;
}

「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」までの数値を追加することで透明度を指定できます。

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

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

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

「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」までの数値を追加することで透明度を指定できます。

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

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

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

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