プログラミング入門30日 の Day 13
🎯 今日のゴール margin(外側の余白)と padding(内側の余白)の違いを説明できる。
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 の提出欄にアップロードしてください。
Q. 枠線の内側の余白を指定するCSSプロパティはどれでしょうか?
| 問題番号 | プログラミング入門30日 Day 13 |
|---|---|
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の提出欄にアップロードしてください。