- Coding Methodology
- 第69回 便利なCSS3の紹介
第69回 便利なCSS3の紹介
最近ではレスポンシブWebデザインの案件や高度な技術を駆使して表現されるWebサイトが増えてきました。
それらを実現するためにCSS3を活用する場面が多くなってきています。今回は、いろいろな場面で活用できる、実装に役立つCSSを幾つかまとめました。一部のブラウザではサポートされていないものもありますが、覚えておくと今後役立つかと思います。
① box-sizingプロパティ
ボックスサイズの幅と高さ(width, height ) の算出方法を指定する際に使用するプロパティです。
width や height と同時に border や padding を指定しているときに、少し値を変えただけで見た目が崩れることがよくあります。
これはボックスサイズの算出方法が複雑なのが原因です。そんな面倒な問題を解決してくれるのが、 box-sizing プロパティです。
デフォルトのボックスモデル（①-1）ではwidth、heightの値にはpaddingとborderの値を含みません｡
例：ボックスモデル
width ： 200px、padding ： 20px 、 border: 5px;
デフォルトのボックスモデルで実際に表示される要素の幅は
200px + (20X2)px + (5X2)px =250pxです。
box-sizingを指定するボックスモデル（①-2）の値 にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。このように box-sizing に border-box を指定しておくことで、指定した width の通りに要素を表示してくれるようになります。
② box-ordinal-groupプロパティ※
display: box 内に配置されたブロック要素（divやpなど）を表示させる順番を指定します。HTML の記述順序に関わらずパーツの順序を変更したい際に使用するプロパティです。
例えば、レスポンシブは媒体により、要素の順番が変わることがあるので、box-ordinal-groupプロパティを使用することで、要素の順序の簡単に指定することが可能です。
※2014年7月現在はAndroidではサポートされていません。
