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

LINEで送る
Pocket

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

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



関連記事

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


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

記事を読む▷


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


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

記事を読む▷


GoToTopBG_animation2のgif画像

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


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

記事を読む▷


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


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

記事を読む▷


正しいショートハンドの書き方のまとめ


コピペ用、ショートハンドのまとめです。 まずはややこしい【background】プロパティから。 【backgr…

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


easy-edit

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


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

記事を読む▷


no image

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


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

記事を読む▷


Message

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

参考にさせていただいてるサイト

Error: Feed has an error or is not valid

PAGE TOP