要素は4層の箱でできている
ボックスモデルは、Web ページの要素を、中身、余白、枠線、外側の余白の4層の箱として考える見方です。この見方があると、要素が実際に取る幅を計算でき、レイアウトのずれの理由が分かります。
フレックスボックスとグリッドで、箱を並べる方法も学びます。
このレッスンのゴール
メモ
ボックスモデルを使って、要素が実際に取る幅を計算できる。
重要な言葉
| ことば | いみ | れい |
|---|---|---|
| ボックスモデル | 要素を4層の箱と見る考え方 | |
| パディング | 中身と枠線の間の余白 | padding: 10px |
| マージン | 枠線の外側の余白 | margin: 8px |
| フレックスボックス | 箱を1列に並べる仕組み | display: flex |
| グリッド | 箱を行と列に並べる仕組み | display: grid |
学生が入力するセルは、このプレビューでは空白です。
中身、padding、border、margin
どの要素も、4層の箱です。内側から、中身、padding、border、margin の順に重なります。
width は、初めの設定では中身の幅だけです。そのため、padding と border を足した分だけ、実際の幅は大きくなります。
例: 箱が取る幅の計算
| 層 | 設定 | 取る幅 |
|---|---|---|
| 中身 | width: 200px | 200px |
| padding | 左右に 10px | 20px |
| border | 左右に 2px | 4px |
| margin | 左右に 8px | 16px |
| 合計 | 4層を足す | 240px |
学生が入力するセルは、このプレビューでは空白です。
box-sizing で幅の数え方を変える
box-sizing: border-box と書くと、width が padding と border を含む幅になります。書いた幅のまま、箱が収まります。
margin は、どちらの場合も外側に付きます。上の例では、border-box にすると、合計は216pxです。
練習: 箱の幅を変える
<div class="card">本日の定食の説明です。</div>
よくある間違い
注意
width を200pxにすれば、箱の全体が200pxになると考える人がいます。初めの設定では、padding と border が足されます。全体を200pxにしたいなら、border-box を使います。
フレックスボックスは箱を1列に並べる
親に display: flex と書くと、子の要素が横1列に並びます。gap で間隔を、justify-content で寄せ方を決めます。
flex-wrap: wrap を付けると、入りきらない箱が次の行に回ります。
例: 3つの箱を並べる
<div class="row">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
例: フレックスの主な設定
| プロパティ | はたらき |
|---|---|
| display: flex | 子を横に並べる |
| gap | 箱の間の間隔 |
| justify-content | 横方向の寄せ方 |
| align-items | 縦方向の寄せ方 |
| flex-wrap | 入りきらないときの折り返し |
学生が入力するセルは、このプレビューでは空白です。
グリッドは行と列に並べる
親に display: grid と書き、grid-template-columns で列の幅を決めます。1fr は、残りの幅を割り分ける単位です。
幅が600pxで 1fr 2fr なら、残りを3つに分け、1つ分の200pxと、2つ分の400pxの2列になります。
練習: 列を3つにする
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
ラボの CSS で箱の設定を数える
ラボのページの style.css で、箱の設定がどれだけ使われているかを、grep -c で数えます。grep -c は、その言葉を含む行の数を出します。
ラボのページを変えていなければ、padding の行が6、border の行が6、display の行が1と出ます。このページに flex も grid もありません。
padding の行を数える
docker exec jupyter grep -c padding site/style.cssここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
border の行を数える
docker exec jupyter grep -c border site/style.cssここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
display の行を数える
docker exec jupyter grep -c display site/style.cssここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。