概要
「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。
目的
paddingとmarginの違いを把握する
paddingとmarginの違い
どちらも余白を作るCSSですが、余白ができる場所が違います。paddingは要素の内側、marginは要素の外側です。
padding：文字や画像と、背景色・境界線との間を広げたいときmargin：その要素と、周囲の別の要素との間隔を広げたいとき
.card {
padding: 20px;
margin: 30px;
border: 1px solid #333;
background-color: #f5f5f5;
}この例では、文字から境界線までが20px、カードの境界線から周囲の要素までが30pxです。背景色はpaddingの部分にも表示されますが、marginの部分には表示されません。
値の書き方を確認する
paddingとmarginは、値の数によって適用される辺が変わります。
- 1つ：上下左右
- 2つ：上下、左右
- 3つ：上、左右、下
- 4つ：上、右、下、左の時計回り
.box {
padding: 10px 20px;
margin: 10px 20px 30px 40px;
}課題の進め方と確認方法
- 対象要素に一時的に
background-colorとborderを付け、箱の範囲を見えるようにします。 - まず
paddingだけを指定し、文字と境界線の間が広がることを確認します。 - 次に
marginだけを変更し、隣の要素との間隔が広がることを確認します。 - ブラウザーの開発者ツールで対象要素を選び、Box Model表示のmargin・border・padding・contentを確認します。
- 最後に一時的な色や境界線を外し、完成見本と比較します。
よくある間違い
- ボタンの文字と枠の間を広げたいのに
marginを使っている - 要素同士の間隔を空けたいのに両方の要素へ
paddingを追加している - 4つの値を「上・左・下・右」の順だと思っている
widthにpaddingが加わり、想定より箱が大きくなっている- 複数箇所を同時に変更し、どの指定で見た目が変わったか分からなくなっている
幅の計算を分かりやすくしたい場合は、box-sizing: border-box;を使うと、指定した幅の中にpaddingとborderを含められます。
余白を使った横方向の中央揃えはmargin: 0 auto;で中央揃えする方法、文字・箱・Flexboxの使い分けは中央揃えの練習も確認してください。
公式資料
データ
使用ソフト
VisualStudioCode
