SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.04.19
  • CATEGORY
TITLE

【CSS】 background-colorを学び背景色を指定しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「【CSS】 background-colorを学び背景色指定しよう!」
についての解説です!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • background-colorの使い方について学びたい方へ
  • 背景色、透過についても解説しております

上の図のように、デフォルトでは背景色は白色になります。
デザインで背景色の指定がある場合はCSSでの指定になります。
background-color色を指定することにより要素の背景に色がつきます。

主なbackgroundプロパティ
  • background-color 
    今回はここを解説!
    指定した要素の背景の色を指定します
  • background-image 
    解説の記事ありますよ
    指定した要素の背景画像を指定します
  • background-repeat 
    解説の記事ありますよ
    背景画像の繰り返しを指定します
  • background-position 
    解説の記事ありますよ
    背景画像の位置を指定します
  • background-size 
    解説の記事ありますよ
    背景画像のサイズを指定します

background-colorについて

background-colorについて

基本的な記述方法としては
background-color:色の指定方法になります。
背景色の以外に背景色を透過もできるようになります

指定できる値
  • background-color: transparent
    初期値になります、背景を通過する透明を指定します
  • background-color: red
    カラーネームによる指定方法になります
  • background-color: #ff0000
    カラーコードによる指定方法になります
  • background-color: rgb(255,0,0)
    RGBによる指定方法になります
  • background-color:
    rgba(255,0,0,0.5)
    RGBAによる指定方法になります

background-color指定方法について

background-color指定方法について

background-colorは下記のように指定します。

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

色の指定はカラーコードやRGBAの指定になります
シンプルな記述方法になっております、次の項目で細かく説明していきます。

transparentについて

transparent
初期値になります、背景を通過する透明を指定します
透明で変化が分からないので、transparentが初期値と覚えておきましょう。

transparent

transparentについて
<div class="inner">
	<div class="box">transparentについて</div>
</div>
.inner {
	color: #fff;
	background-color: #7FFF00;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 40px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-color: transparent; /* transparentの指定 */
}

カラーネームについて

background-color:カラーネーム
カラーネームによる指定方法になります
カラーネームとは、色の名前で指定する方法になります。
赤色は「red」、黒色は「black」、白色は「white」など色の名前を英語で記述します。

標準16色の一覧

blacksilvergraywhite
maroonredpurplefuchsia
greenlimeoliveyellow
navybluetealaqua

横にスクロール

カラーネーム

カラーネームについて
<div class="inner">
	<div class="box">カラーネームについて</div>
</div>
.inner {
	color: #fff;
	background-color: #7FFF00;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 40px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-color: maroon; /* カラーネームの指定 */
}

注意!
よくあるミスとして「#red」などクセで前に#(シャープ)を付けて、
背景色が反映しないことがあるので気をつけましょう!

カラーコードについて

background-color:カラーコード
カラーコードによる指定方法になります
カラーコードは英数字を組み合わせた#3桁または6桁になります。

黒色は「#000000」、白色は「#FFFFFF」このように6桁全て同じ数字、アルフベットの場合は
黒色は「#000」、白色は「#FFF」と略して3桁でも問題ありません!

標準16色の一覧

#000000#C0C0C0#808080#FFFFFF
#800000#FF0000#800080#FF00FF
#008000#00FF00#808000#FFFF00
#000080#0000FF#008080#00FFFF

横にスクロール

カラーコード

カラーコードについて
<div class="inner">
	<div class="box">カラーコードについて</div>
</div>
.inner {
	color: #fff;
	background-color: #7FFF00;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 40px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-color: #808000; /* カラーコードの指定 */
}

RGBについて

background-color:rgb(255,0,0)
rgb(数値01,数値02,数値03)による指定方法になります
RGBとは、色を示すRGBのred・green・blueの値になります。

覚えておきましょう!
数値01にはredの赤の数値、数値02にはgreenの緑の数値、数値03にはblueの青の数値
数値についてはrgb(「0~255」,「0~255」,「0~255」)になります。

標準16色の一覧

0,0,0192,192,192128,128,128255,255,255
128,0,0255,0,0128,0,128255,0,255
0,128,00,255,0128,128,0255,255,0
0,0,1280,0,2550,128,1280,255,255

横にスクロール

RGB

RGBについて
<div class="inner">
	<div class="box">RGBについて</div>
</div>
.inner {
	color: #fff;
	background-color: #7FFF00;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 40px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-color: rgb(128,128,128); /* RGBの指定 */
}

RGBAについて

background-color:rgb(255,0,0,0.5)
rgb(数値01,数値02,数値03,透明度)による指定方法になります
RGBAとは、色を示すRGBのred・green・blueとさらに透明度の指定ができます。

覚えておきましょう!
透明度を0(透明)~1(不透明)で指定になります。

標準16色の一覧

0,0,0192,192,192128,128,128255,255,255
128,0,0255,0,0128,0,128255,0,255
0,128,00,255,0128,128,0255,255,0
0,0,1280,0,2550,128,1280,255,255

横にスクロール

RGBA

RGBAについて(0.3)
RGBAについて(0.6)
RGBAについて(0.9)
<div class="inner">
	<div class="box box_1">RGBAについて(0.3)</div>
</div>
	<div class="box box_2">RGBAについて(0.6)</div>
</div>
	<div class="box box_3">RGBAについて(0.9)</div>
</div>
.inner {
	color: #fff;
	background-color: #7FFF00;  /* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 40px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
}
.box_1 {
	background-color: rgba(0,0,0,0.3); /* RGBAの指定 */
}
.box_2 {
	background-color: rgba(0,0,0,0.6); /* RGBAの指定 */
}
.box_3 {
	background-color: rgba(0,0,0,0.9); /* RGBAの指定 */
}

オススメ変換ツールのご紹介

色を選択することで、「RGB」、「RGBA」を簡単に抽出できます。
とても便利なサイトですので一度参考にしてみください。

CSSプロパティ参考になるかも

基本的な記述方法、相対パス、絶対パスについて解説しております。

repeat-x、repeat-yでの指定方法について解説しております。

水平方向、垂直方向での指定方法について解説しております。

auto、contain、coverなどの指定について解説しております。

まとめ

今回はこれで以上です。

POINT
  • background-color
    指定した要素の背景の色を指定します
  • カラーネームには#は付けないようにしましょう
  • 数値01にはredの赤の数値、数値02にはgreenの緑の数値、数値03にはblueの青の数値
  • rgb(「0~255」,「0~255」,「0~255」)になります
  • 透明度を示すalphaには0(透明)~1(不透明)で指定しましょう
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top