Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2010年11月 > CSS3のbackground-positionでより柔軟な配置を

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2010年11月19日

CSS3のbackground-positionでより柔軟な配置を

フロントエンド・エンジニア 矢倉

CSS3の新機能といえば、border-radiustransform, border-imageなど、新しいプロパティを想像してしまいがちですが、新しい機能は必ずしも新しいプロパティでのみ実装されるわけではありません。CSS3 Colorで追加されたrgba()など、値を拡張して実現する新機能もいくつか存在しています。

こういった拡張は既存プロパティの値として使われるため、ソースを見てもあまり目新しくありません。目立ちにくいのです。そんな目立ちにくい拡張のひとつに、background-positionがあります。

CSS2までは、background-positionに2つの値が指定されても、その基点は「上から、左から」でしかありませんでした。表現によっては「右から○○px、下から○○pxの位置」といった指定のほうが都合の良い場合もありますから、それが出来ないことを面倒と考えていた方も多いのではないでしょうか。

さて、CSS3では、background-positionの値が拡張され、background-position: right 12px bottom 16px 基点を自由に設定できるようになりました。これまでの2つの値指定は左上という定義を残し、キーワードを与えることで基点を自由に設定することができます。

ブラウザーの対応状況ですが、ベータ版以上で今のところ対応しているのはIE9 betaのみとなっています(追記:11月24日に公開されたOpera 11のベータ版で対応を確認しました)。対応状況はMicrosoftが公開しているテストケースで大まかにチェックできます。

FirefoxやChrome, Safariについては、バグは立てられているものの進捗はないようです。