CSSボックスのサイズ変更
CSSボックスのサイズ変更
CSSbox-sizingプロパティを使用すると、要素の幅と高さの合計にパディングと境界線を含めることができます。
CSS box-sizingプロパティなし
デフォルトでは、要素の幅と高さは次のように計算されます。
幅 + パディング + ボーダー = 要素の実際の幅 高さ + パディング + ボーダー = 要素の実際の高さ
つまり、要素の幅/高さを設定すると、設定したよりも要素が大きく表示されることがよくあります (要素の境界線とパディングが要素の指定された幅/高さに追加されるため)。
次の図は、幅と高さが同じに指定された 2 つの <div> 要素を示しています。
この div は小さくなっています (幅 300 ピクセル、高さ 100 ピクセル)。
この div は大きくなっています (幅も 300px、高さは 100px)。
上記の 2 つの <div> 要素は、結果として異なるサイズになります (div2 にはパディングが指定されているため)。
例
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
box-sizingプロパティはこの問題を解決します。
CSS box-sizingプロパティを使用
box-sizingプロパティを使用すると、要素の幅と高さの合計にパディングと境界線を含めることができます。
設定した場合box-sizing: border-box;要素では、パディングとボーダーは幅と高さに含まれます。
両方の div が同じサイズになりました。
万歳！
box-sizing: border-box;以下は、両方の <div>要素に追加された上記と同じ例です。
例
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
box-sizing: border-box;を使用した結果なので、多くの開発者は、ページ上のすべての要素がこのように機能することを望んでいます。
以下のコードは、多くのブラウザはすでに使用しており、すべての要素がこのより直感的な方法でサイズ変更されることを保証します。多くのブラウザーはすでにbox-sizing: border-box; を使用しています(すべてではありませんが、入力領域とテキスト領域が幅: 100% で異なって見えるのはそのためです)。
これをすべての要素に適用することは、安全で賢明です。
CSS Box Sizing プロパティ
|
プロパティ |
説明 |
|---|---|
| box-sizing | 要素の幅と高さの計算方法を定義します。 パディングとボーダーを含むか含まないか |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。