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

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

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



関連記事

WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


easy-edit

共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策


WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編…

記事を読む▷


複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP