マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS

CSS3でのbackground-sizeの記述方法色々と注意点

投稿日:2014年6月2日 更新日:

最近ではスマフォサイトだけではなくPCサイトでもCSS3を使う事が多くなって来ました。
そこで私がよく使うbackground-sizeに関するメモ書きです。

分けて書く場合

background:url(images/bg.png) 0 2px no-repeat;
background-size:13px 13px;

この書き方が私は一番多いですね。

注意点

この書き方の場合background-sizeがbackgroundの後にある事が重要です。

例えばこの様な書き方をしたいケースがあるかと思います。

ul li {
width:13px;
height:13px;
background-size:13px 13px;
}
ul li.img0 {
background:url(images/bg0.png) 0 0 no-repeat;
}
ul li.img1 {
background:url(images/bg1.png) 0 0 no-repeat;
}

この場合iOS6等のCSS2仕様のUAでは問題無かったのですが、
iOS7等backgroundのショートハンドがCSS3仕様対応のUAではbackground-sizeがうまく効きません。
それはbackground-sizeより後に記述したbackgroudショートハンドプロパティで上書きされるからです。
この場合はbackground-size:auto auto;を指定していることになります。

この場合backgroudショートハンドを全て分ける事で対応出来ると思います。

ul li {
width:13px;
height:13px;
background-size:13px 13px;
background-position:0 0;
background-repeat:no-repeat;
}
ul li.img0 {
background-image:url(images/bg0.png);
}
ul li.img1 {
background-image:url(images/bg1.png);
}

まとめて書く場合

background:url(images/bg.png) 0 2px / 13px 13px no-repeat;

とCSS3仕様の書き方をします。

注意点

この書き方はUAによって対応状況が違う様ですので私はあまり使用していませんが
使用される方は、特にスマフォサイト等はチェックされることをオススメします。

-CSS

執筆者:


comment

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

関連記事

CSSカラーコードを16進数からRGBに変えた理由

CSSカラーコードを16進数からRGBに変えた理由

最近コーディングをする際、特にスマフォサイトの場合は特に スタイルシートのカラーコードを16進数ではなくRGBで記述する事が増えました。 私がカラーコードにRGBを使う様になった最大の理由がRGBの場 …

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 E:first-child 親要素の最初の子要素であるE要素に適用 E:fi …