backgroundプロパティの正しいショートハンドの書き方

• 2016/01/28
• 2013/09/20
• Webデザインテクニック
• background, css, ショートハンド

ABCから始めよう！と言いつつ、ちょっとABCからの内容ではないかもしれませんが、今まで貯めてた “？” の解決法で、今パッとでてきたのがこれだったので、最初の投稿はこれにしました。

さてさて。そんな訳で、html,cssの勉強をして、最初のうちはこんな書き方を気にできる程余裕がなかったのでスル〜してたのですが、最近になって（といってもだいぶなりますが）DWではなく、手入力で編集作業をする事が多々でてきたので、いちいち

div{
  background-image: url(../images/JUN_Always_Be_Cool.jpg)
  background-color: #ccbb33;
  background-position: left top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

こんな風（順番はバラバラです）に書くのは邪魔くさい！ってことで、ショートハンドで書くようになってるのですが、そこででてきた “？” が
『正しい書き順ってどうやったけ？』ってことなのですが、みなさん知ってます？
知らない方がこの記事見てると思うので、是非これ見て覚えるなりコピペで使ってくださいね！これが正しい書き順のようです。

div{
  background: #ccbb33 url(../images/JUN_Always_Be_Cool.jpg) no-repeat fixed left top;
}

ちなみに、最後の2つ、attachmentとposition x yのプロパティに関しては、初期値が fixed left topなので、

div{
  background: #ccbb33 url(../images/JUN_Always_Be_Cool.jpg) no-repeat;
}

が＝（イコール）となります。なので、無駄な記述を減らすためにもこのように記載するのがよいようですね。

プロパティの並び順はあまり気にしてなかったのですが、古いブラウザでは問題が発生するようですので、ダメというならやめとくのが得策。
ということで、これからはこの正しい書き方にしましょう！
とは言っても、なかなか順番は覚えられないと思いますので、是非コピペして使ってくださいね！

このページ参考にしました。
http://qrayg.com/journal/news/css-background-shorthand

他のショートハンドはこちらからどうぞ。
正しいショートハンドの書き方のまとめ