【初心者向け】30日間でWebサイト作成チャレンジ｜7日目：CSSのボックスモデルを理解する
投稿日：2026/04/13
最終更新日：2026/04/13
30日間でWebサイト作成チャレンジ7日目です。
もう1週間も経ちました！この調子で学習を続けていきましょう。
今回はCSSにおいてのボックスモデルについてご紹介いたします。
この概念はその要素にborder(枠線)をつけるときなどに重要な概念です。
では始めていきましょう。
今回の記事でわかること
- CSSのボックスモデルについて
CSSのボックスモデルとは
では早速以下の画像をご覧ください。
コンテンツとは文字などのことを指します。
例えばh1タグ内の文字のことです。
文字の周りにはpaddingという領域があり、
その外側にborderの領域があり、
またその外側にはmarginと呼ばれる領域があります。
これらをどのようにして扱っていくかを見ていきます。
まずはpaddingからです。ですがまずは分かりやすいようにコンテンツにborderを設定します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>こんにちは</p>
</body>
</html>
CSS
p {
border: 1px solid black;
}
実行結果がこちらです。
では次にこのコードにpaddingを加えていきます。
つまりborderの内側の領域を増やすということです。
増やす時の単位は主にpxを使用します。
以下のコードをご覧ください。
p {
border: 1px solid black;
padding: 100px;
}
上記のコードはborderの内側が上下左右それぞれ100px分領域が増えるということを意味します。
実行結果は以下のようになります。
では次にborderの外側の余白を消していきます。 marginを0pxで設定しましょう。 コードは以下のようにしてください。
p {
border: 1px solid black;
padding: 100px;
margin: 0px;
}
その結果こうなります。
しかしまだ空白があります。
これはどこの部分の余白であるかというと、pタグを囲っているタグに着目してください。
そうです。bodyタグです。
bodyタグはデフォルトでmarginの余白が設定されています。
このデフォルトのmarginの余白を外していきましょう。
CSSコードを以下のように変更してください。
body{
margin: 0px;
}
p {
border: 1px solid black;
padding: 100px;
margin: 0px;
}
すると実行結果は以下のようになります。
綺麗に埋まりました！
Yama
私がCSSの学びたての頃はどうしてこの隙間が埋まらないのだろうと悩んでた時期がありました。
独学でプログラミング学習に時間がかかってしまっている方に朗報です！
プログラミングを理解するのにはどうしても時間がかかってしまうものです。
本を買うにしても結局わからなくなってしまう
AIに聞いても結局理解できずになんとなく作ってしまう
そんな時に心強いのがこちらのプログラミングスクールです
カウンセリングが無料で受けることができます。
↓↓↓
まとめ
以上がボックスモデルの概念でした。
よくpaddingとmarginを間違えることがあるのでご注意ください。
次回はpaddingとmarginについて深掘りしていきます！！
これからも継続していたら必ずプログラミングができるようになるので頑張りましょう！
ネットだけの情報だとどうしても分かりにくい部分があります。
そんな時に助けになるのがこちらの書籍です。
Amazonでベストセラー1位を獲得しています
↓1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］
プロフィール
大阪出身の20代エンジニア。
Webサイトおよびモバイルアプリ開発を中心に学習・開発を行っています。
HTML、CSS、JavaScript、Python、Swift、Kotlinなどを
用いた開発に取り組んでいます。
人気記事
VS Codeの使い方を初心者向けに解説｜基本操作・設定・拡張機能
【CSS】かっこいいWebサイトを作るには必要なCSSを初心者向けに解説
【JavaScript】基本文法を解説！Webサイトをユーザーに合わせて変化させるための第一歩
新着記事
【Python】基本的な文法や関数などを初心者にもわかりやすく解説
【Swift】iOSアプリを作る前に触れておこう！基本的な文法について解説
【Kotlin】Androidアプリを作るために必要な知識！基本についてわかりやすく解説
