


このレッスンではCSSを使って高さと幅と背景の色を変える方法を学びます。
これらを変えるには3つのCSSプロパティを使います。
覚えることが少しづつ増えてきましたが、ひとつひとつマスターしていきましょう!
- background-colorを使った背景色の変え方
- height、widhtを使った高さと幅の変え方
高さと幅と背景の色レッスンの答え
高さと幅と背景の色レッスンで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をつけ忘れる
「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プロパティの使い方を学びました。
- background-colorを使った背景色の変え方
- height、widhtを使った高さと幅の変え方
このレッスンではpxで値の単位を指定するのを忘れたり、「height」と「width」のプロパティ名を間違えたりするミスがよくあります。
うまく動かなかったときには、これらを確認してみましょう!
- pxをつけ忘れる
- プロパティ名を間違える