レスポンシブデザインに便利！今さらCSS3のbox-sizingについて話してみます

CSS3で追加したプロパティ「box-sizing」が結構便利です。皆さんブログで良さを紹介していますが、私なりに具体例を入れつつ解説してみますので、これを読んで「box-sizing」への理解が深まれば嬉しいです。 以前「初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark」という記事を書いたときに、スマホ用サイトを作るときにbox-sizingが便利という内容を書きましたが、スマホ用だけでなくレスポンシブなサイトにも便利です。 box-sizingとは box-sizingの値には「content-box」「border-box」「inherit」があります。content-boxは初期値で、要素の大きさを、width、padding、borderで計算されます。 今回便利というのborder-boxを使った場合です。border-boxを指定すると、要素

[manatsu83]

CSS3“box-sizing”の説明

[miyuky927]

box-sizing

[haishi]

CSS3で追加したプロパティ「box-sizing」が結構便利です。皆さんブログで良さを紹介していますが、私なりに具体例を入れつつ解説してみますので、これを読んで「box-sizing」への理解が深まれば嬉しいです。

[teruzoh0209]

.left-box { float: left; width: 58%; padding: 15px; } .right-box { float: left; width: 38%; padding: 15px; } この場合、2つの要素全体の横幅は96%+60pxになり、100%を超える可能性があります。超えた場合2つ目の要素は回り込めなくなりますし、2つの要

[fushimik]

うんうん便利。よく使う〜