第2部 HTML/CSS — Day 13 / 30

ボックスモデル

CSSでは、すべての要素を「箱(ボックス)」として扱います。padding は枠線の内側の余白、margin は枠線の外側の余白です。

.box {
  padding: 20px;   /* 内側の余白(枠線と中身の間) */
  margin: 30px;    /* 外側の余白(となりの要素との間) */
  border: 2px solid #2563eb;
}

ブラウザの開発者ツール(F12キー)で要素を選ぶと、ボックスモデルが図で表示されます。余白の調整に迷ったら開発者ツールで確認しましょう。

今日の練習

padding と margin の値をいろいろ変えて、どこの余白が変わるのかを開発者ツールで確かめましょう。

模範解答を見る

.box-a {
  padding: 40px;   /* 内側が広がる: 枠線と文字の間が空く */
  margin: 10px;
  border: 2px solid #2563eb;
}
.box-b {
  padding: 10px;
  margin: 40px;    /* 外側が広がる: となりの要素から離れる */
  border: 2px solid #ea580c;
}

padding を増やすと枠線の内側、margin を増やすと要素の外側の間隔が変わることを開発者ツールで確認できれば正解です。

理解度チェック

学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. 枠線の内側の余白を指定するCSSプロパティはどれでしょうか?

padding margin border

Completed

正解です！Day 13 の学習を確認しました

科目	経営情報 2026
教材	プログラミング入門30日 Day 13 ボックスモデル
学籍番号
氏名
提出時間
確認コード

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。