検索

キーワード


【CSS】background-colorプロパティについて

  • 公開日:2020-09-23 18:20:18
  • 最終更新日:2020-11-17 15:49:58
【CSS】background-colorプロパティについて

こんにちは。駆け出しエンジニアの竹前です。

ここでは、CSSのbackground-colorプロパティについて説明します。

CSSについて勉強している方の参考になれば幸いです。


background-colorとは

background-colorとは、背景色を指定するプロパティです。

背景色は要素ごとに指定することができます。


background-colorの書き方

全体の背景色を指定する

全体に背景色を指定するには、body要素にbackground-colorプロパティを設定します。

body {
	background-color: cyan;
}


background-colorを指定した例

body要素に背景色を指定することができました。


特定の要素に背景色を指定する

特定の要素に背景色を指定するには、背景色を指定したい要素にbackground-colorプロパティを設定します。

body {
	background-color: cyan;
}
h1 {
	background-color: #FFA500;
}


特定の要素にbackground-colorを指定した例

h1要素にbody要素とは別の背景色を指定することができました。


色の指定方法

CSSの色を指定する方法は複数あります。

ここでは、さまざまな色の指定方法について説明します。


1. カラーネーム

redやblueなど、色名を英語で指定する方法です。

background-color: black;		/* 黒 */
background-color: white;		/* 白 */
background-color: red;	        /* 赤 */
background-color: blue;		    /* 青 */
background-color: green;		/* 緑 */


2. RGB

RGBとは、光の三原色(Red・Green・Blue)の色の強さを0~255の範囲で指定する方法です。

色の強さはRed,Green,Blueの順で、値をカンマで区切って記述します。

値が大きいほど、色の強さが強くなり、濃い色になります。

/* rgb(Red, Green, Blue) */
background-color: rgb(0, 0, 0);			    /* 黒 */
background-color: rgb(255, 255, 255);		/* 白 */
background-color: rgb(0, 255, 0);			/* 赤 */
background-color: rgb(0, 0, 255);			/* 青 */
background-color: rgb(0, 128, 0);			/* 緑 */


3. RBGA

RGBAは、CSS3から追加された色の指定方法です。

RGBに加え、透明度(Alpha)を0.0~から1.0の範囲で指定する方法です。

透明度は、0.0で完全に透明、0.5で半透明、1.0で完全に不透明になります。


以下のサンプルコードで透明度の確認をします。

/* rgba(Red, Green, Blue, Alpha) */

.test1 {
	background-color: rgba(255, 165, 0, 1.0);
}
.test2 {
	background-color: rgba(255, 165, 0, 0.5);
}
.test3 {
	background-color: rgba(255, 165 ,0, 0.0);
}


透明度の確認


4. カラーコード

カラーコードは、RGB値を6桁の16進数の値(0~F)で指定する方法です。

「#(シャープ)」の後にRed、Green、Blueの順で2桁ずつ区切ります。

色の強さは16進数の00が最も薄く、FFに近づくほど濃い色になります。

/* #RRGGBB */
background-color: #000000;	/* 黒 */
background-color: #FFFFFF:	/* 白 */
background-color: #FF0000;	/* 赤 */
background-color: #0000FF;	/* 青 */
background-color: #008000;	/* 緑 */



【著者】

たけまえ

駆け出しエンジニアの竹前です。 私自身が勉強したことをもとに、難しい内容はできるだけ簡単になるように読みやすく、分かりやすい記事を心がけています。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ