マーカーネット株式会社

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

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

関連記事

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

この「Dash」と呼ばれるプログラムはGeneral Assemblyが起業家などを育てる教育分野に転身したのをきっかけにもともと自社内の教育ツールとして開発されたものだったらしいのですが、評判が良か …

<WordPress>カスタムフィールドテンプレートのテキストエディター(TinyMCE Advanced)で プラグインの設定通り反映されないとき

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

前回構造疑似クラスについて便利な使い方をご紹介しましたが、 (知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】) 今回はCSS3の属性セレクタをご紹介します。 E[foo] fo …

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

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

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …

CSS3の便利機能紹介。

CSS3の便利機能紹介。 https://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook