プロゲートの文字の色レッスンの解説とよくあるミス

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

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

このレッスンからCSSの学習が始まります。

CSSはHTMLと記述の仕方が違うのでCSSの記述方法を正しく学びましょう。

文字を色を変更するときは以下のよくあるミスに気をつけながら進めましょう。

文字の色レッスンの答え

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

h1 {
  /* 文字の色を#ff0000にしてください */
  color: #ff0000;
  
}

p {
  /* 文字の色を#0000ffにしてください */
  color: #0000ff;
  
}

よくあるミス

文字の色レッスンでのよくあるミスは次のとおりです。
間違えて覚えないように気をつけてください。

よくあるミス1：colorプロパティをfont-colorとしてしまう

文字の色を変更する時にプロパティをfont-colorとしてしまうミスがあります。

文字の色を変えるのでfont-colorとしたくなりますが、文字の色を指定するプロパティはcolorです。
間違えて覚えないように気をつけましょう！

h1 {
  /* font-colorプロパティは存在しません。colorプロパティで文字の色を変更します。 */
  font-color: #ff0000;
  
}

よくあるミス2：コロン（:）やセミコロン（;）がない

CSSではプロパティの末尾にコロン（:）、行の末尾にセミコロン（;）を付ける必要があります。

はじめのうちはこれらを付けるのを忘れやすいので気をつけましょう。
特にセミコロン（;）は慣れてきても忘れます。

h1 {
  /* セミコロン（;）がない */
  font-color: #ff0000
  
}

まとめ

文字の色レッスンからCSSの学習が始まりました。
文字を色を変更するときにもミスがよくあります。

CSSの記述方法とプロパティを正しく覚えていきましょう。