ブラウザでは、多くのHTML要素が四角い領域として配置されます。この領域の大きさと間隔を理解すると、余白が合わない、横幅がはみ出すといった問題を切り分けられます。
このレッスンでは、ボックスモデルを確認してから、ページのコンテンツ幅と横並びを作ります。
ボックスモデルを理解する
要素の大きさと余白を考えるときは、ボックスモデルの4つの領域を分けて確認します。
要素は内側から、内容、padding、border、marginで構成されます。paddingは要素の内側、marginは要素の外側の余白です。
*,
*::before,
*::after {
box-sizing: border-box;
}border-boxにすると、指定した幅の中にpaddingとborderが含まれます。幅の計算が分かりやすくなるため、最初に全要素へ適用します。
ページのコンテンツ幅を作る
本文を画面いっぱいに広げると、大きな画面で1行が長くなります。最大幅を決め、左右へ自動の余白を付けます。
次の画像は、「ページのコンテンツ幅を作る」で扱うコードや構成をブラウザで表示した結果です。
.container {
width: min(100% - 32px, 1120px);
margin-inline: auto;
}画面が狭いときは左右16pxずつの余白を残し、広いときは1120pxより大きくならない指定です。固定幅だけで作らないことがレスポンシブの土台になります。
余白を役割で使い分ける
セクションの内側にはpadding、隣り合う部品の間隔にはgap、要素同士を離す必要がある場合にmarginを使います。すべてをmarginで調整すると、どの要素が間隔を管理しているか分かりにくくなります。
次の図では、「余白を役割で使い分ける」で押さえる違いを左右で比較しています。
同じ種類の余白は値をそろえ、8px、16px、24pxのように段階を決めます。デザイン画像との比較も行いやすくなります。
Flexboxで一方向の並びを作る
Flexboxを使うと、関連する要素を横方向または縦方向へ並べられます。
Flexboxは、横一列または縦一列を基準に要素を並べるときに使います。ナビゲーション、ボタンの中身、画像と文章の横並びなどに向いています。
.profile {
display: flex;
align-items: center;
gap: 32px;
}
.profile__image,
.profile__body {
flex: 1;
}Gridで行と列の配置を作る
行と列の両方をそろえたい場合は、Gridを使うと配置を管理しやすくなります。
Gridは、カード一覧のように行と列の両方をそろえる配置に向いています。カード数が変わっても同じ列幅で並べやすくなります。
.card-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}はみ出しを確認する
DevToolsで要素を選ぶと、内容、padding、border、marginの大きさを確認できます。横スクロールが出た場合は、固定幅、長い文字列、大きな画像、絶対配置を順番に確認してください。
次の図では、「はみ出しを確認する」の仕組みや関係を確認できます。
