【CSS】ボックス幅の計算が簡単になる「box-sizing」の使い方ブロック要素の横幅は、width(height)だけではなくpaddingとborderの幅も加算されます。レイアウト時のこの計算がけっこうめんどくさいんですが、CSS3のbox-sizingプロパティを使うと計算が超簡単に!というか計算する必要がなくなります。box-sizingとはボックス幅の算出方法を指定するプロパティです。デフォルトの値はcontent-boxで、width(height)にpaddingとborderを加えた幅が実際のボックス幅となります。値にborder-boxを指定すると、width(height)に指定した値がそのまま要素の幅となり、paddingとborderを含めたサイズで描画されます。それでは実際に挙動の違いを見てみましょう。border-box;を指定しています。border-box;}DEMOBOX1BOX2BOX1の実際の横幅が250+50+50の350pxなのに対し、BOX2はwidthに指定した250pxのままになっています。まとめ使い勝手が良い上に理解するのも簡単!CSS3ですがほぼ全てのブラウザ(IEは8以上)が対応しているので、使える所はどんどん使っていきましょう。95%;とか)のときに使うと幸せになれます。n番目など、リストの装飾でよく使う擬似クラスまとめAuthor名前:Leo26歳にしてようやくフリーターから脱却してWeb屋さんになった人。ライターみたいな事もするよ。あと雪国に住んでるけどバイクが好き。特技は後先考えずに突撃して自滅することです。