タグ: CSS3

background-sizeが効かない?!指定する時に注意すべきこと

Retina対応時に便利なプロパティ、background-size Retinaディスプレイに対応するために、画像のサイズを1/2に指定したい時がある。 img指定している時はzoom:0.5などを指定すればOKだが、背景に指定している時は、background-sizeでサイズを調整する。 background-sizeの指定方法 background-sizeプロパティは横幅と高さの2つを指定する。 例えば、200px*40pxの背景画像を半分のサイズにしたい場合はこうだ。 [css]background-size:100px 20px;[/css] その他にも、パーセンテージで指定することなども可能。指定方法はこちら。background-size-CSS3リファレンス background-sizeが効か...

CSSの対応状況が分かるサイト「Can I use…」

このCSSプロパティ、このブラウザで使える? CSS3で新しいプロパティが出てきたり、様々なモバイル対応ブラウザが出てきたりと、プロパティの対応状況を把握するのが困難になってきた。 例えば最近、background-sizeプロパティについて調べたい事があった。 どのブラウザに対応しているのか、色々なサイトを行きつ戻りつ検索するのは非常に面倒である。 そこで見つけたのがこちらのサイト、「Can I use...」だ。 Can I use... Support tables for HTML5, CSS3, etc [browsershot url="http://caniuse.com/" width="545"] 調べたいCSSプロパティを入力するだけ 例えば「background-size」と入力すると、各ブラ...