プロゲートのヘッダーの余白レッスンの解説とよくあるミス

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

ヘッダーの余白レッスンではヘッダーのコンテンツのロゴとリストに対して余白を取り見栄えをよくします。

余白を取る方法はCSSのpaddingプロパティを使用します。

padding は CSS の一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/padding

ヘッダーの余白レッスンの答え

このレッスンの答えは以下のとおりです。

sylesheet.cssの適切な場所にpaddingプロパティと値を記述していきます。

body {
  font-family: "Avenir Next";
}

li {
  list-style: none;
  float: left;
  /* 上下のpaddingを33px、左右のpaddingを20pxにしてください */
  padding: 33px 20px;
  
}

.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}

.header-logo {
  float: left;
  font-size: 36px;
  /* 上下のpaddingを20px、左右のpaddingを40pxにしてください */
  padding: 20px 40px;
  
}

.main {
  background-color: #bdf7f1;
  height: 600px;
}

.footer {
  background-color: #ceccf3;
  height: 270px;
}

よくあるミス

paddingプロパティの使い方や挙動をよく理解していないことによるミスがあります。

paddingプロパティの使い所や挙動を正しく学びましょう。

よくあるミス1：値をダブルクォーテーション（"）で囲む

/* paddingプロパティの値はダブルクォーテーションで囲まない */
padding: "20px 40px";

paddingプロパティの値で複数していするときはスペースで区切りますが、ダブルクォーテーションで囲みません。

ダブルクォーテーションで囲むとダブルクォーテーションの中は文字となります。

よくあるミス2：paddingプロパティの省略形の使い方

/* 上部の余白から時計回りに余白を指定 */
padding: 20px 40px 20px 40px;

paddingプロパティの値の書き方は複数ありますが、上記のコードのように書く省略形について使い方が間違っている事が多いです。

上記の省略形は上部の余白から時計回りに余白を指定しています。
そのため、上20px・右40px・下20px・左40pxの余白を取ります。

まとめ：paddingプロパティの使い方と挙動をマスターしよう！

このレッスンではヘッダーのコンテンツのロゴとリストに対して余白を取り見栄えをよくしました。

余白を取る方法はCSSのpaddingプロパティを使用します。

padding は CSS の一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/padding

paddingプロパティの使い方や挙動をよく理解していないことによるミスがあります。

paddingプロパティの値をダブルクォーテーションで囲むことや省略形の使い方や挙動を正しく学びましょう。