この記事では、CSSにおけるbackgroundプロパティの一括指定についてまとめてあります。
わかりやすく説明したつもりなので、よかったらぜひご覧ください。
1.動画で解説
この記事は、youtubeにも投稿してあります。
動画がよい方は、こちらをご覧ください。
2.要点
この記事の要点です。
- backgroundプロパティでimage、color、position、size、repeat、attachmentを一括指定できる
- 原則、値は順不同でスペース空ける
- positionとsizeだけはpositionとsizeの順でスラッシュ(/)で区切る
- 表示されないブラウザのときはsizeだけ別に書く
以下、説明していきます。
3.一括指定がないと・・・
背景を設定するプロパティには以下の7つあります。
背景画像:background-image
背景画像の大きさ:background-size
背景色:background-color
背景画像の表示位置:background-position
背景画像の繰り返し:background-repeat
スクロール時の背景画像の表示:background-attachment
つまり、以下のような背景の設定をしたい場合、
こんなコードになるわけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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プロパティを使えば以下のように一括で値を指定することができるわけです。
1 2 3 4 5 6 7 |
body{ background:url(ball.jpg) #dee6f4 center/100px no-repeat fixed; } |
backgroundプロパティの一括指定にはいくつか注意点があります。
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の順番に書いて値をスラッシュ(/)で区切ることがルールです。
また数値を1つ書いた場合は、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だけ値は別に書く必要があります。
こんな感じです。
1 2 3 4 5 6 7 8 9 |
body{ background:url(ball.jpg) #dee6f4 center no-repeat fixed; background-size:100px; } |
これならうまく表示されるはずです。
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール
独学でプログラミングを勉強するのは大変じゃないですか?
- ググるのが面倒
- エラーの対応に1日消費
- 重要なコードがわからない
お金はかからないものの、かなり効率が悪いです。
『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。
代表的なスクールは以下の2つ。
- TechAcademy
web系、アプリ系いずれもOK
完全オンラインでプログラミングを学習したい方 - テックキャンプ
web系、アプリ系いずれもOK
教室またはオンラインで学習したい方
この2つには以下のような特典もあります。
TechAcademy
- 1週間の無料体験
- 1コース申し込むと、もう1コースプレゼント
テックアカデミー
- 1週間以内に申告あれば全額返金
- 転職できなかったら全額返金
かなりお得です。
確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。
目安の報酬をまとめておくと、
- ランサーズ:1件10万くらい
- 中小企業:1件30万くらい
- 大手企業:桁違い
こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。
この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。
テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。