プロゲートの高さと幅と背景の色レッスンの解説とよくあるミス

このレッスンではCSSを使って高さと幅と背景の色を変える方法を学びます。

これらを変えるには3つのCSSプロパティを使います。
覚えることが少しづつ増えてきましたが、ひとつひとつマスターしていきましょう！

高さと幅と背景の色レッスンの答え

高さと幅と背景の色レッスンでstylesheet.cssタブを選択して以下の通りにCSSを記述すると正解です。

h1 {
  color: #e6855e;
  font-size: 30px;
  /* 背景の色を#f3f372にしてください */
  background-color: #f3f372;
  
  /* 高さを80pxにしてください */
  height: 80px;
  
  /* 幅を200pxにしてください */
  width: 200px;
  
}

img {
  /* 高さを50pxにしてください */
  height: 50px;
  
  /* 幅を70pxにしてください */
  width: 70px;
  
}

よくあるミス

このレッスンでよくあるミスは単位のつけ忘れや、このレッスンで新しく学ぶCSSプロパティを間違えることです。

pxをつけ忘れる

「px」の単位をつけ忘れる事がよくあります。

CSSで使える単位は「%」や「rem」など複数あるので、「px」をつけてピクセルであることを定義してください。

/* 値にpxがついていない */
height: 80;

プロパティ名を間違える

このレッスンで学ぶプロパティの「height」と「width」でよく間違えます。

「height」はハイトと読むので、「haight」としてしまいやすいです。

また、「width」はウィズやワイズなどと読み、dの音がほとんどありません。
そのため、「with」と間違えてしまいやすいです。

/* プロパティ名が違う。正しくはheight */
haight: 80px;

/* プロパティ名が違う。正しくはwidth */
with: 200px;

まとめ

このレッスンでは背景色を変更する「background-color」、高さと幅を変更する「height」「width」のCSSプロパティの使い方を学びました。

このレッスンではpxで値の単位を指定するのを忘れたり、「height」と「width」のプロパティ名を間違えたりするミスがよくあります。

うまく動かなかったときには、これらを確認してみましょう！