【CSS】background(背景一括指定)の使い方をわかりやすく説明

この記事では、CSSにおけるbackgroundプロパティの一括指定についてまとめてあります。

わかりやすく説明したつもりなので、よかったらぜひご覧ください。

この記事の内容

1.動画で解説
2.要点
3.一括指定がないと・・・
3.一括指定backgroundプロパティ
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

1.動画で解説

この記事は、youtubeにも投稿してあります。

動画がよい方は、こちらをご覧ください。

2.要点

この記事の要点です。

backgroundプロパティでimage、color、position、size、repeat、attachmentを一括指定できる
原則、値は順不同でスペース空ける
positionとsizeだけはpositionとsizeの順でスラッシュ(/)で区切る
表示されないブラウザのときはsizeだけ別に書く

以下、説明していきます。

3.一括指定がないと・・・

背景を設定するプロパティには以下の７つあります。

背景画像：background-image
背景画像の大きさ：background-size
背景色：background-color
背景画像の表示位置：background-position
背景画像の繰り返し：background-repeat
スクロール時の背景画像の表示：background-attachment

つまり、以下のような背景の設定をしたい場合、

こんなコードになるわけです。

body{
  /* star.jpg画像 */
  background-image:url(star.jpg);

  /* たてよこ100px */
  background-size:100px;

  /* 背景：みず色 */
  background-color:#dee6f4;

  /* 真ん中表示 */
  background-position:center;

  /* 一つだけ表示 */
  background-repeat:no-repeat;

  /* スクロールしても動かない */
  background-attachment:fixed;
  }

body{

/* star.jpg画像 */

background-image:url(star.jpg);

/* たてよこ100px */

background-size:100px;

/* 背景：みず色 */

background-color:#dee6f4;

/* 真ん中表示 */

background-position:center;

/* 一つだけ表示 */

background-repeat:no-repeat;

/* スクロールしても動かない */

background-attachment:fixed;

}

3.一括指定backgroundプロパティ

上記コードですが、書くのが面倒ですよね？

ここで役に立つのが一括指定です。

つまりbackgroundプロパティを使えば以下のように一括で値を指定することができるわけです。

body{
  　background:url(ball.jpg) 
                #dee6f4 
　　            center/100px 
　　            no-repeat
　　            fixed;
}

body{

　background:url(ball.jpg)

#dee6f4

　　 center/100px

　　 no-repeat

　　 fixed;

}

backgroundプロパティの一括指定にはいくつか注意点があります。

1.値を書く順番
2.positionとsizeの取り扱い
3.値を省略したとき
4.表示されないとき

3-1.値を書く順番

原則、値は順不同です。

値と値の間にはスペースを入れます。

3-2.positionとsizeの取り扱い

background-positionプロパティの値
数値、top、bottom、left、right

background-sizeプロパティの値
数値、auto、cover、contain

つまり一括指定で数値を書いた場合、どちらの指定かわからない・・・

このような問題があるため、positionとsizeの値だけは、position、sizeの順番に書いて値をスラッシュ(/)で区切ることがルールです。

また数値を１つ書いた場合は、positionを指定したと扱われます。

3-3.値を省略したとき

一括指定で値をかかなかったプロパティは、リセットされます。

つまり、初期値になります。

各プロパティの初期値は以下の通り。

background-image：none

background-color：transparent

background-position：0% 0%

background-size：auto auto

background-repeat：repeat

background-attachment：scroll

リセットされるだけなのであとから指定することは可能です。

3-4.表示されないとき

ブラウザによって、一括指定がうまく表示されないときがあります。

実はこれbackground-sizeの値が悪さをしているのです。

こんなときは、background-sizeだけ値は別に書く必要があります。

こんな感じです。

body{ 　
　　background:url(ball.jpg) 
　　#dee6f4 　　 
　　center
　　no-repeat 　　 
　　fixed; 

    background-size:100px;
}

body{ 　

　　background:url(ball.jpg)

　　#dee6f4 　　

　　center

　　no-repeat 　　

　　fixed;

background-size:100px;

}

これならうまく表示されるはずです。

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか？

ググるのが面倒
エラーの対応に1日消費
重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の２つ。

TechAcademy
web系、アプリ系いずれもOK
完全オンラインでプログラミングを学習したい方
テックキャンプ
web系、アプリ系いずれもOK
教室またはオンラインで学習したい方

この２つには以下のような特典もあります。

TechAcademy

1週間の無料体験
１コース申し込むと、もう１コースプレゼント

テックアカデミー

1週間以内に申告あれば全額返金
転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20～30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

ランサーズ：1件10万くらい
中小企業：1件30万くらい
大手企業：桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

・TechAcademy：無料で1週間体験
・テックキャンプ：全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。