CSS - Box Sizing
こんにちは、Web開発の志望者さんたち！今日は、CSSのbox-sizingの興味深い世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私はこの重要な概念をガイドして、ウェブレイアウトをデザインする際に非常に便利になることを保証します。信じてください、これをマスターすると、どうやってこれまで zonder livedなかったのか不思議に思うことでしょう！
CSS Box Sizingプロパティ
基本から始めましょう。CSSのbox-sizingプロパティは、要素の総幅と総高さがどのように計算されるかを決定する魔法の杖のようなものです。これはウェブデザインにおけるゲームチェンジャーであり、その理由を楽しみにしています！
従来のCSSボックスモデルでは、要素に幅と高さを設定すると、パディングとボーダーにより実際の占めるスペースが大きくなることがあります。これは予期しないレイアウトの問題を引き起こすことがあり、大きな箱を小さなクローゼットに収めるようなものです – ただ funktioniert しません！
ここでbox-sizingが救世主的な役割を果たします。これにより、ブラウザが要素の総サイズをどのように計算するかを制御することができます。
可能な値
box-sizingプロパティには3つの可能な値があります。それらを分解してみましょう：
| 値 | 説明 |
|---|---|
| content-box | このはデフォルト値です。幅と高さは要素のコンテンツにのみ適用されます。 |
| border-box | 幅と高さにはコンテンツ、パディング、ボーダーが含まれます。 |
| inherit | 要素は親要素からbox-sizingの値を継承します。 |
それでは、いくつかの例でこれらを見てみましょう！
Content-Box（デフォルト）
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: content-box;
}この例では、要素の総幅は250px（200px + 各側の20pxパディング + 各側の5pxボーダー）となり、総高さは150pxとなります。小さなピザを注文したのに大きなピザが届くようなものです – 予想外ですね？
Border-Box
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
}ここでは、border-boxを使用することで、総幅と総高さはそれぞれ200pxと100px exactに become します。パディングとボーダーはこれらの寸法に含まれています。注文したピザがそのまま届くようなものです – サプライズはありません！
適用範囲
box-sizingプロパティは、幅や高さを受け入れるすべての要素に適用されます。これには以下のものが含まれます：
- ブロックレベル要素（
<div>、<p>、<h1>など） - インラインブロック要素
- テーブルセルおよびtable-caption要素
インライン要素には適用されませんが、ディスプレイプロパティを変更すると適用されます。
DOM構文
JavaScriptでは、DOMを使用してbox-sizingプロパティを取得および修正することができます。以下のようにします：
// box-sizing値を取得
let boxSizing = element.style.boxSizing;
// box-sizing値を設定
element.style.boxSizing = 'border-box';例
実際の例ですべてをまとめましょう。簡単なレイアウトを作成し、2つのカラムを並べてみます。
<div class="container">
<div class="column">カラム1</div>
<div class="column">カラム2</div>
</div>.container {
width: 100%;
}
.column {
width: 50%;
padding: 20px;
float: left;
box-sizing: border-box;
}この例では、各カラムの幅を50%に設定し、パディングを追加しました。box-sizing: border-boxを使用することで、カラムがパディングを含めても完美に並ぶようにします。これをしないと、カラムはコンテナを溢れ出すことになります！
以下のように分解します：
- コンテナを100%幅に設定し、親要素の全幅を占めます。
- 各カラムの幅を50%に設定し、並んでいます。
- 各カラムに20pxのパディングを追加し、余裕を確保します。
-
box-sizing: border-boxを使用することで、パディングが50%の幅に含まれ、溢れ出しを防止します。
box-sizingの力はこれが冰山の一角です。ウェブ開発の旅を続ける中で、このプロパティが役立つ状況は数え切れません。
ウェブデザインは調和の取れたレイアウトを作成することであり、box-sizingはそのための秘密の武器です。整理されたクローゼットを持つようなものです – すべてが完美に収まり、悪いサプライズはありません！
私が教えてきた年月の中で、多くの「ああ、これだ！」という瞬間を目にしてきました。box-sizingの概念を理解した瞬間、レイアウトが突然理解できるようになり、予期しないオーバーフローによるストレスが消えます。
したがって、練習を続け、さまざまなレイアウトを試し、box-sizingを遊びましょう。それでは、あなたも簡単にピクセルパーフェクトなデザインを作成できるようになります！
未来のウェブ魔法使いたち、快適なコーディングをお楽しみください！
Credits: Image by storyset