backgroundをショートハンドで指定する

関連するプロパティを一気に指定できるショートハンド型は楽なので是非覚えておきたいところです。

今回は背景に関するbackgroudのショートハンド指定について。
注意するのはサイズ指定と-origin -clipの順番だけなので、特に難しくもありません。

ショートハンドbackground

ショートハンドでは

• background-color （色）
• background-image（画像やグラデーション）
• background-repeat　（繰り返し）
• background-position（画像の表示位置）
• background-size　（サイズ）
• background-origin　（画像の基準位置）
• background-clip　（表示領域）
• background-attachment　（画像の固定）

を一括指定することが出来ます。

backgroundショートハンドでの厳守ルール

基本的に、空白区切りで指定していけば良いのですが、background-sizeを指定するときは必ず　-position/-size　とすること。（-sizeのみの指定はエラー）

-origin -clipの指定は最初に指定した値は-origin。 後に指定した値が-clip。という２つのルールがあります。

-sizeと-positionについては、それ自身が空白区切りの値で指定できる（0% 50% やtop leftなど）ので、ルールが無いと意味が分からなくなる為。

-originと-clipは同じ値を使って指定するから。

この2点さえ守っていれば後は順不同でOKです。
個別指定のときと同じく、省略したプロパティについては初期値が適用されます。

（例）
#{
 background: coral url(xxx.jpg) no-repeat center/40% 80%
}

色・画像・繰り返し・基準/サイズで指定しています。
「背景画像にグラデーションをかける」でも書きましたが、画像は色より上に重なりますので覚えておきましょう。

background一括指定のその他注意点

個人的な注意点としては、

「transitionやanimationでbackground-sizeを変えるときは個別指定する」

「ホバーボタンの作り方」で少しふれていますが、background-sizeの値を変更するアニメーションを使うときは個別に指定しておく必要があります。 -sizeだけ読み取ってくれるかなと期待したのですが駄目でした。

あと、一括指定だけの話ではないですが、background-attachmentにfixedが指定されているとき、background-originは無視されます。固定するのに基準位置つけても仕方ないですしね。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]