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で、簡単に画像を切り替える


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

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


resolution-list_00

【2021最新】スマホ・タブレットの解像度一覧表(画面サイズの割合)iPhone・iPad..


最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…

記事を読む▷


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


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

記事を読む▷


Message

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

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

PAGE TOP