color・backgroundプロパティの値(CSS)

colorプロパティの値(CSS)

color

値（パラメータ）	内容
カラーコード	文字色を「#+6桁のコード」で指定します。 6桁の数字は左の2桁が赤、次の2桁が緑、次の2桁が青を表します。それぞれの色強さは16進数（00～ff）で表現します。
カラーネーム	文字色を名称で指定します。

入力例	color: #ff0000;
表示例	#ff0000で文字色が赤になります

上記表示例のサンプルコード（HTML埋め込み）

<div style="color: #ff0000;">#ff0000で文字色が赤になります</div>

サンプルコード（CSS別記）

/*CSSコード*/
.color-red {
  color: #ff0000;
}

<!--HTMLコード-->
<div class="color-red">#ff0000で文字色が赤になります</div>

サンプルコード（CSS別記）の表示

#ff0000で文字色が赤になります

backgroundプロパティの値(CSS)

background-color

値（パラメータ）	内容
transparent	透明（初期値）
カラーコード	背景色を「#+6桁のコード」で指定します。 6桁の数字は左の2桁が赤、次の2桁が緑、次の2桁が青を表します。それぞれの色強さは16進数（00～ff）で表現します。
カラーネーム	背景色を名称で指定します。

入力例	background-color: #ff0000;
表示例	#ff0000で背景色が赤になります

上記表示例のサンプルコード（HTML埋め込み）

<div style="background-color: #ff0000;">#ff0000で背景色が赤になります</div>

サンプルコード（CSS別記）

/*CSSコード*/
.background-color-red {
  background-color: #ff0000;
}

<!--HTMLコード-->
<div class="background-color-red">#ff0000で背景色が赤になりました</div>

サンプルコード（CSS別記）の表示

#ff0000で背景色が赤になりました

background-image

値（パラメータ）	内容
none	背景画像なし（初期値）
url(URI)	背景に使用する画像をURIで指定します。

入力例	background-image: url();
表示例	背景画像のサンプル65×43 背景画像のサンプル65×43

上記表示例のサンプルコード（HTML埋め込み）

<div style="background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg);">背景画像のサンプル65×43<br>背景画像のサンプル65×43</div>

サンプルコード（CSS別記）

/*CSSコード*/
.background-img1 {
  width: 650px;
  height: 433px;
  background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg);
}

.background-img2 {
  width: 650px;
  height: 433px;
  background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg);
}

<!--HTMLコード-->
<div class="background-img1">背景画像のサンプル650×433</div><br>
<div class="background-img2">背景画像のサンプル65×43</div>

サンプルコード（CSS別記）の表示

背景画像のサンプル650×433

背景画像のサンプル65×43

background-repeat

値（パラメータ）	内容
repeat	背景画像を敷き詰めます（初期値）
repeat-x	背景画像を並べます（横方向）
repeat-y	背景画像並べます（縦方向）
no-repeat	背景画像を一つだけ表示します。

入力例	background-repeat: no-repeat;
表示例	背景画像のサンプル65×43 背景画像のサンプル背景画像のサンプル65×43

上記表示例のサンプルコード（HTML埋め込み）

<div style="background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg); background-repeat: no-repeat;">背景画像のサンプル65×43<br>背景画像のサンプル<br>背景画像のサンプル65×43</div>

サンプルコード（CSS別記）

/*CSSコード*/
.background-img3 {
  width: 650px;
  height: 433px;
  background-color: #fdf2f4;
  background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg);
  background-repeat: no-repeat;
}

<!--HTMLコード-->
<div class="background-img3">背景画像のサンプル65×43</div>

サンプルコード（CSS別記）の表示

背景画像のサンプル65×43

background-position

値（パラメータ）	内容
left	背景画像を配置します（左側）
center	背景画像を配置します（中央）
right	背景画像を配置します（右側）
top	背景画像を配置します（上側）
bottom	背景画像を配置します（下側）

（2つの値で指定する場合は半角スペースで区切ります。値がひとつの場合はもうひとつの値がcenterになります）

入力例	background-position: right top;
表示例	背景画像のサンプル65×43 背景画像のサンプル65×43 背景画像のサンプル65×43 背景画像のサンプル65×43

上記表示例のサンプルコード（HTML埋め込み）

<div style="background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg); background-repeat: no-repeat; background-position: right top;">背景画像のサンプル65×43<br>背景画像のサンプル65×43<br>背景画像のサンプル65×43<br>背景画像のサンプル65×43</div>

サンプルコード（CSS別記）

/*CSSコード*/
.background-img4 {
  width: 650px;
  height: 433px;
  background-color: #fdf2f4;
  background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg);
  background-repeat: no-repeat;
  background-position: right top;
}

<!--HTMLコード-->
<div class="background-img4">背景画像のサンプル65×43</div>

サンプルコード（CSS別記）の表示

背景画像のサンプル65×43

background-attachment

値（パラメータ）	内容
scroll	スクロールする（その場に固定しない）（初期値）（ブラウザのスクロールで一緒に動く）
fixed	スクロールしない（その場に固定する）（ブラウザのスクロールで背景がその場に固定されているように見える）

入力例	background-attachment: sccroll;

サンプルコード（CSS別記）

/*CSSコード*/
.background-img5 {
  width: 650px;
  height: 200px;
  background-attachment: scroll;
  background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg);
}
.background-img6 {
  width: 650px;
  height: 200px;
  background-attachment: fixed;
  background-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-01.jpg);
}

<!--HTMLコード-->
<div class="background-img5">背景画像のサンプル650×433<br>
スクロールする（背景をその場に固定しない）<br>
（ブラウザのスクロールで背景が一緒に動く）<br></div><br>
<div class="background-img6">背景画像のサンプル650×433<br>
スクロールしない（背景をその場に固定する）<br>
（この画像は、背景画像として固定されています）<br>
（固定された背景の上をブラウザのスクロールで移動しています）</div>

サンプルコード（CSS別記）の表示

背景画像のサンプル650×433
スクロールする（背景をその場に固定しない）
（ブラウザのスクロールで背景が一緒に動く）

背景画像のサンプル650×433
スクロールしない（背景をその場に固定する）
（この画像は、背景画像として固定されています）
（固定された背景の上をブラウザのスクロールで移動しています）

background

値（パラメータ）	内容
background-colorで使用する値	背景の色を定義します。
background-imageで使用する値	背景に使用する画像を定義します。
background-repeatで使用する値	背景に使用する画像の並べ方を定義します。
background-positionで使用する値	背景に使用する画像の位置を定義します。
background-attachmentで使用する値	背景に使用する画像を固定するか定義します。

入力例	background: #fdf2f4 url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-02.jpg) repeat-y right fixd;

サンプルコード（CSS別記）

/*CSSコード*/
.background-img7 {
  width: 650px;
  height: 433px;
  background: #fdf2f4 url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/03/cat-03.jpg) center repeat-y fixed;
}

<!--HTMLコード-->
<div class="background-img7">背景画像のサンプル162×108</div>

サンプルコード（CSS別記）の表示

背景画像のサンプル162×108

CSSプロパティ一覧に戻る