皆さんこんにちは、かたすけです！
今日はCSSを書く上で重要な、ボックスモデルについて学んでいきましょう！
CSSってなに？？という方はこちら↓
ボックスモデルってなに？
CSSを書いていくうえで欠かせないのが、「ボックスモデル」を理解することです。
なんか難しそう…という方でも、丁寧に解説しているので一緒に頑張りましょう！
ボックスモデルとは、HTMLの要素は全て、以下の 6つの要素で構成される「箱」として捉えられるという考え方です。
- content: 内容
- border: 境界線
- padding: 境界線内間の余白
- margin: 境界線外側の余白
- width: ボックスの横幅
- height: ボックスの縦幅
この箱を組み合わせてレイアウトを作っていくんですね。全てのHTML要素はデフォルトで左寄せなので、基本的に左上から箱が並んでいくイメージです。
各要素の詳細
【content (コンテンツ): 内容】
テキストや画像など、HTMLで書かれている要素の内容が表示される領域です。
【border (ボーダー): 境界線】
要素の境界線を指定します。
以下の３つの要素を指定する必要があります。
- 太さ (border-width)
- スタイル (border-style)
- 色 (border-color)
初期値は`none`なので、指定しないと見た目上は見えません。
詳しくは次回！
【padding (パディング): 境界線内側の余白】
要素の内側の余白を指定します。contentとborderの間に余白を作りたい時に使います。
書き方については次回！
padding領域には要素の背景色が適用されるのがポイント！
【margin (マージン): 境界線外側の余白】
要素の外側の余白を指定します。要素と要素の間に距離を取りたい時に使います。
＜プラスアルファ＞：上下のマージンは相殺されることがある！
隣接する兄弟要素間や、親要素と子要素でmarginが重なる場合に、マージンが相殺されることがあります。
- 隣接する兄弟要素間: 大きい方の値が適用される
- 親要素と子要素: 上方向は大きい方の値が適用、下方向は親要素の高さがautoの場合に相殺される
【width: ボックスの横幅】
要素の横幅を指定します。
【height: ボックスの縦幅】
要素の縦幅を指定します。
ブロックボックスとインラインボックス
HTMLの要素は、ブロックボックスとインラインボックスの２種類に分けられます。
- ブロックボックス: 横幅いっぱいに広がり、次の要素が下に表示される（例：`<p>`、`<h1>`など）
- インラインボックス: 必要な幅だけを使用し、次の要素と同じ行に並んで表示される（例：`<span>`、`<a>`など）
`display`プロパティを設定することで、要素を任意のボックスタイプに変更できます。詳しくは次回。
今日の学び
今日はボックスモデルの基本的な概念と、各要素の役割について詳しく学びました。次回は、具体的な書き方について学んでいきましょう！
最後まで読んでいただき、ありがとうございました！
この記事は、以下の書籍の情報を参考に作成させていただいております。
とてもお勧めです！
