backgroundのショートハンドがいつまでたっても理解できないよ。。。
プログラマーさん
雰囲気で使っちゃうよね。。
CSSのbackgroundプロパティ、なんとなくしか理解していないから必要になるたびに調べてる。
備忘も兼ねて仕様をまとめて、そろそろちゃんと理解したいと思います。
個人的に一番使うbackgroundショートハンドを振り返る
普段使用している記述を振り返る。
See the Pen Untitled by kitaharas (@kitaharas) on CodePen.
個人的に一番使うbackgroundの記述パターン。（紛らわしいがpよりhやliで使うことが多い。）
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" /></svg>')
no-repeat center center/ 100%;例ではテキストの先頭にアイコンを設置しているけど、それ以外でも基本背景画像を設定するときは一度これを使って、イメージと違ったら微調整している節がある。
中身を分解してみると下記のようになっている模様。
background:
/* background-image */
url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" /></svg>')
/* background-repeat */
no-repeat
/* background-position */
center center
/* background-size */
/ 100%;background-image
例ではSVGを直接描画していますがファイルでもなんでもOK
background-repeat
背景画像を繰り返すかどうか。no-repeatで繰り返さない。
background-position
x軸,y軸の順番で書く。center centerで左右上下真ん中の意味。
background-size
これだけちょっと引っ掛け。ショートハンドの時はbackground-positionの後に”/”で区切ってから書く。
改めて見てみると、どうして苦手意識があったのかっていうくらいシンプルでした。。。
backgroundショートハンドのルール
次はその他のプロパティ含めてショートハンドのルールをまとめておきます。
| プロパティ名 | ルール |
| background-size | background-positionの後に / で区切ってから書く |
| background-origin | 表示開始の基準(background-clipより先に記述する) |
| background-clip | 表示するエリア(background-originより先に記述する) |
| background-attachment | 背景画像を固定したい時などに使う。 |
一部順番に制限があるものもありますが、backgroundのショートハンドは基本順不同で書くことができる。
originとclipについては下記ページの「おまけ」部分が非常に！わかりやすい。
複数画像を一括で指定する方法
“,”で区切るだけで複数設定が可能。これは初めて知った時衝撃だった。可読性は悪いけどページの背景にイメージ画像を複数設置したい時などは必須。
background:
url('画像パス') no-repeat right 3.5%/62%,
url('画像パス') no-repeat left 37%/62%,
url('画像パス') no-repeat right 74%/62% ;それぞれのプロパティで細かな設定があるが、まずは基本を押さえて調べなくてもかけるようになりたい。
コメント