【CSS 1-3】ボックスモデルの入口｜width・border・paddingで“箱として見る感覚”をつかむ（初心者向け）

CSSで余白を触ると、次に少し気になってくるのが
「この要素って、どこまでが広さなんだろう？」という部分です。

見出しや段落、箱っぽい要素を見ていると、
実は全部ある程度“箱”として扱えます。

今日はその入口として、
width・border・padding・margin
を見ながら、“箱の感覚”をつかんでいきます。

前回の【HTML 2-1】HTMLに対して、style.css に下のコードを追加してください。
今回は main を“箱”として見やすくします。
※web-programmingファルダの中のCSS1-2フォルダのHTMLファイルと同じなので
CSS1-3フォルダ等を作成してコピペして改変でも良いと思います。

body {
    background-color: #f7f7f7;
    margin: 0;
    padding: 24px;
    color: #333333;
}

main {
    background-color: #ffffff;
    width: 720px;
    padding: 24px;
    margin-top: 24px;
    border: 1px solid #d1d5db;
}

h1 {
    color: #2563eb;
    font-size: 32px;
    margin-bottom: 16px;
}

h2 {
    color: #111827;
    font-size: 24px;
    margin-top: 24px;
    margin-bottom: 12px;
}

p {
    font-size: 16px;
    margin-bottom: 12px;
}

toshi

main に線が付くと、“ここが箱なんだな”と
見えやすくなります。

前回やった padding と margin に、
今回は width と border が加わりました。

これで “箱を見る4点セット” がそろった感じです。

border を付けると、どこまでが箱なのかが急に分かりやすくなります。

main {
    border: 1px solid #d1d5db;
}

width は、箱の横幅を決めます。

たとえば、

main {
    width: 720px;
}

• 数字を小さくすると、箱が細くなる
• 数字を大きくすると、箱が広くなる
• 最初は 600〜800px くらいで違いを見ると分かりやすい

toshi

実際に数値を変更してみて確認してみよう！！

たとえば、main の padding を 24px → 40px にすると、
箱の中が広くなって、文字がさらに端から離れます。

逆に margin-top を増やすと、
main 全体が上の要素から少し離れて見えます。

• width を 720px → 600px にしてみる
• border の色を変えてみる
• padding を 24px → 32px にしてみる
• margin-top を 24px → 40px にしてみる
• “どれが箱の中で、どれが箱の外か”を見ながら確認する

toshi

この回は、見た目を良くするより
“違いを観察する”くらいで十分です。

• 要素は“箱”として見ると分かりやすい
• width は箱の横幅
• border は箱のふち
• padding は箱の内側
• margin は箱の外側

ここまでで、CSSの最初の土台がそろいました。
次はミニ制作として、HTMLで作った1ページの見た目を少し整えていきます。