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

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

Google AdS



関連記事

onMouseOver、onMouseOutで、簡単にテキストを切り替える!


前回のonMouseOver,onMouseOutで簡単に画像を切り替える!の続き、応用編です。 実はこちらサイト…

記事を読む▷


GoToTopBG_animation2のgif画像

CSSスプライトで、スムーズに画像を切り替える


マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくる…

記事を読む▷


no image

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


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

記事を読む▷


onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


WordPressでGIFアニメが動かない時の対処法


今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…

記事を読む▷


Message

メールアドレスが公開されることはありません。

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

PAGE TOP