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。という2つのルールがあります。

-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コース[オンライン]

2020年3月27日HTML/CSScss

Posted by ミフネWEB