CSS ボックスモデルの実験へようこそ！ウェブデザインにおいて、すべての HTML 要素はボックスとして考えることができます。CSS ボックスモデルは、これらのボックスがウェブページ上でどのようにレンダリングされるかを説明する基本的な概念です。コンテンツエリア、パディング、ボーダー、マージンの 4 つの主要な部分で構成されています。
この実験では、これらの各コンポーネントを操作して、要素のサイズと間隔を制御する方法を学びます。index.html ファイルと style.css ファイルを使用します。すべての変更は style.css ファイルで行われ、LabEx インターフェースの Web 8080 タブに切り替えることで、即座に結果を確認できます。
始めましょう！
このステップでは、要素のコンテンツエリアのサイズを定義することから始めます。CSS の width プロパティは、要素のコンテンツボックスの幅を設定します。ボックスモデルの他のコンポーネント（パディング、ボーダー、マージン）は、このコンテンツエリアの周りに追加されます。
まず、WebIDE の左側にあるファイルエクスプローラーで style.css ファイルを見つけます。それをクリックしてエディタで開きます。
次に、style.css ファイルに以下の CSS ルールを追加します。このルールは、クラス box を持つ div 要素をターゲットにし、その幅を 300 ピクセルに設定します。
.box {
width: 300px;
}コードを追加した後、ファイルを保存します（Ctrl+S または Cmd+S）。効果を確認するには、Web 8080 タブをクリックします。ボックス内のテキストが 300 ピクセル幅のコンテナに収まるように折り返されていることに気づくでしょう。
このステップでは、コンテンツと要素の端の間にスペースを追加します。このスペースは padding と呼ばれます。padding プロパティは、コンテンツの周りの領域をクリアします。これは要素のボーダーの内側にあります。
ボックスの 4 つの辺すべてに 20 ピクセルのパディングを追加しましょう。style.css ファイルの既存の .box ルールを修正して、padding プロパティを含めます。
.box {
width: 300px;
padding: 20px;
background-color: lightblue; /* 可視性を高めるために追加 */
}コンテンツエリアとパディングエリアをより見やすくするために background-color も追加しました。ファイルを保存して Web 8080 タブに切り替えます。ボックス内のテキストコンテンツの周りに、20 ピクセルの水色のスペースが追加されているのがわかるでしょう。パディングはコンテンツの幅の上に加算されるため、ボックス全体の表示幅が増加していることに注意してください。
このステップでは、要素のパディングとコンテンツの周りに border を追加します。border プロパティは、ボーダーの幅、スタイル、色を一度に設定できるショートハンドです。
幅 2 ピクセルの実線（ソリッド）の黒いボーダーを追加しましょう。style.css ファイルの .box ルールを以下のように更新します。
.box {
width: 300px;
padding: 20px;
background-color: lightblue;
border: 2px solid black;
}border プロパティの値は、それぞれ border-width、border-style、border-color です。
ファイルを保存し、Web 8080 タブをリフレッシュします。ボックスのパディング領域の周りに黒い線が描画されているのが見えるはずです。この新しいボーダーに対応するため、要素の合計幅は再び増加しました。
このステップでは、要素のボーダーの外側のスペースを制御します。これは margin プロパティを使用して行われます。マージンは要素の周りに空のスペースを作成し、他の要素をその要素から押し出します。
ボックスのすべての辺に 50 ピクセルのマージンを追加して、見出しやページの端からある程度の距離を確保しましょう。style.css の .box ルールに margin プロパティを追加します。
.box {
width: 300px;
padding: 20px;
background-color: lightblue;
border: 2px solid black;
margin: 50px;
}ファイルを保存し、Web 8080 タブを確認します。ボックス全体が <h1> 要素から下に、ブラウザウィンドウの左端から離れて押しやられているのがわかるでしょう。これは、マージンが要素間のスペースを制御するためにどのように使用されるかを示しています。
このステップでは、一般的なレイアウトの課題に対処します。デフォルトでは、要素の width および height プロパティはコンテンツボックスにのみ適用されます。パディングとボーダーはその上に加えられるため、サイジングが予測不能になる可能性があります。私たちのボックスでは、現在の合計幅は 300px (width) + 40px (左右のパディング) + 4px (左右のボーダー) = 344px です。
これを簡略化するために、box-sizing プロパティを使用できます。これを border-box に設定することで、ブラウザにパディングとボーダーを要素の合計幅と高さに含めるように指示します。
.box ルールに box-sizing: border-box; プロパティを追加します。
.box {
width: 300px;
padding: 20px;
background-color: lightblue;
border: 2px solid black;
margin: 50px;
box-sizing: border-box;
}ファイルを保存し、Web 8080 タブを確認します。ボックスが縮小されているのがわかるでしょう。これで、パディングとボーダーを含めたボックスの合計幅は正確に 300 ピクセルになりました。ブラウザはコンテンツ領域を自動的に調整して適合させます。この動作は、レイアウトを作成する上でより直感的です。
実験の完了おめでとうございます！CSS のボックスモデルの基本を習得しました。
この実験では、以下の練習を行いました。
width を設定する。padding を適用する。border を追加する。margin を使用する。box-sizing: border-box を活用する。ボックスモデルを理解することは、ウェブページ上の要素のレイアウトとスペーシングを制御するために不可欠です。これらの概念を引き続き練習して、CSS を習得してください。
