box-sizingで横幅の算出方法を指定する--FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008-04-14 18:35:01
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

「border-box」で表示できることのメリット

　box-sizingプロパティを「border-box」と指定して、パディングやボーダーを横幅に含めて表示できることのメリットは大きい。たとえば、次のサンプルでは

でマークアップした部分の横幅を50%と指定して、2段組みにしてレイアウトしたものだ。

　box-sizingプロパティを「border-box」と指定しているので、30ピクセルのパディングやボーダーは50%の横幅に含めて表示され、2段組みが崩れることはない。

Firefoxでの表示 Firefoxでの表示
Safari 3での表示 Safari 3での表示
Operaでの表示 Operaでの表示
Internet Explorer 8（ベータ版）での表示 Internet Explorer 8（ベータ版）での表示 
div{
width: 50%;
border: solid 30px #ffaa00padding: 30px;
background-color: #ffff00;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

div#column02{
border-color: #00ffff;
}


こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。






こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
※ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ