SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.04.30
  • CATEGORY
TITLE

【CSS】background 背景のプロパティを一括指定しよう!

SHU[シュウ]

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

シュウ
シュウ
今回は「background 背景のプロパティを一括指定しよう!」
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • backgroundの使い方について学びたい方へ
  • 今回は一括指定について記事を書いております

上の図のように、一括指定なしの場合は「imageで画像」、「positionで位置」、「repeatで繰り返し」と
3行にわたって指定をしております。
一括指定ありの場合backgroundの後にそれぞれの値をスペースで区切ることにより
指定が可能になります。
指定方法もとても簡単です

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

backgroundについて

backgroundについて

基本的な記述方法としては
background値になります。

指定できる値
  • 指定できる値
    color、image、repeat、position、attachment、clip、size、originになります

background指定方法について

background指定方法について

今回は、主に使用されるcolor、image、repeat、position、sizeの5つにポイントを絞って
解説していきます。

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

セレクタ {
	background: colorの値 imageの値 repeatの値.....;
}

注意!
それぞれの値を入力する際にはスペースで区切って指定しましょう!

背景色と背景画像の一括指定方法

セレクタ {
	background: colorの値 imageの値;
}

colorの値 imageの値

指定方法01
<div class="inner">
	<div class="box">指定方法01</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background: #77997e url(画像パス);   /* 背景色、背景画像の指定 */
    background-repeat: no-repeat;     /* 背景画像の繰り返しの指定 */
}

注意!
colorの値、imageの値、両方の値を指定する際には、背景色(color)を先に記述し、
その後に背景画像(image)を指定します。

背景色と背景画像、繰り返しの一括指定方法

セレクタ {
	background: colorの値 imageの値 repeatの値;
}

colorの値 imageの値 repeatの値

指定方法02
<div class="inner">
	<div class="box">指定方法02</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	
	/* 背景色、背景画像、繰り返しの指定 */
	background: #77997e url(画像パス) no-repeat;
}

背景色と背景画像、繰り返し、位置の一括指定方法

セレクタ {
	background: colorの値 imageの値 repeatの値 positionの値;
}

colorの値 imageの値 repeatの値 positionの値

指定方法03
<div class="inner">
	<div class="box">指定方法03</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	
	/* 背景色、背景画像、繰り返しの指定、位置の指定 */
	background: #77997e url(画像パス) no-repeat right bottom; 
}

背景色と背景画像、繰り返し、位置、サイズの一括指定方法

セレクタ {
	background: colorの値 imageの値 repeatの値 positionの値 / sizeの値;
}

colorの値 imageの値 repeatの値 positionの値 / sizeの値

指定方法04
<div class="inner">
	<div class="box">指定方法04</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	
	/* 背景色、背景画像、繰り返しの指定、位置、サイズの指定 */
	background: #77997e url(画像パス) no-repeat right bottom / 100px; 
}

注意!
sizeの値は、positionの値の後に
「/」スラッシュで区切ります。

ブラウザによる問題点について

ブラウザによる問題点について

ブラウザによって、一括指定がうまく表示されない問題があります。
sizeの値が原因としてあげられております。

解決策としてsizeの値は分けて記述するようにしましょう。

ブラウザによる問題点について

ブラウザによる問題点について
<div class="inner">
	<div class="box">ブラウザによる問題点について</div>
</div>
.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	
	/* 背景色、背景画像、繰り返しの指定、位置、サイズの指定 */
	background: #77997e url(画像パス) no-repeat right bottom;
	
	/* サイズの指定 */
	background-size: 100px;
}

注意!
ブラウザ表示に問題がある際にはsizeの値は分けて記述するようにしましょう!

まとめ

今回はこれで以上です。

POINT
  • background
    一括指定する際に使用します
  • それぞれの値を入力する際にはスペースで区切って指定しましょう!
  • 背景色(color)を先に記述し、その後に背景画像(image)を指定します。
  • sizeの値は、positionの値の後に「/」スラッシュで区切ります。
  • ブラウザ表示に問題がある際にはsizeの値は分けて記述するようにしましょう!
スポンサーリンク

SHU

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

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top