プロゲートの文字の大きさと種類レッスンの解説とよくあるミス

このレッスンでは文字に関するCSSについて学びます。

CSSでできることは前回のレッスンの色の指定以外にも文字の大きさや種類を指定することができます。

文字の大きさと種類レッスンの答え

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

h1 {
  color: #ff0000;
  /* 文字の大きさを40pxにしてください */
  font-size: 40px;
  
  /* 文字の種類をserifにしてください */
  font-family: serif;
  
}

p {
  color: #0000ff;
  /* 文字の大きさを20pxにしてください */
  font-size: 20px;
  
  /* 文字の種類を"Lucida Grande"にしてください */
  font-family: "Lucida Grande";
  
}

よくあるミス

このレッスンではプロパティと値に関するミスが多いです。

なぜこのようなミスをするのかも説明しますので、間違えないようにしましょう。

よくあるミス1：プロパティのタイプミス

CSSプロパティでは単語をハイフン（-）でつなげます。

font-sizeプロパティは「font」と「size」という単語がハイフン（-）でつながっています。

/* プロパティのタイプミス。単語をハイフン（-）でつなげる */
fontsize: 40px;

よくあるミス2：Lucida Grandeをダブルクォーテーション（"）で囲んでいない

serifの場合はダブルクォーテーション（"）で囲む必要はありませんが、「Lucida Grande」は2つの単語があり文字として認識してほしいのでダブルクォーテーション（"）で囲む必要があります。

/* Lucida Grandeをダブルクォーテーション（"）で囲んでいない */
font-family: Lucida Grande;

まとめ：文字に関するCSSプロパティの使い方をマスターしよう

このレッスンでは文字の大きさや種類を指定する方法を学びました。
マスターすることは「font-sizeプロパティの使い方」と「font-familyプロパティの使い方」です。

しかし、これらには「プロパティのタイプミス」や「Lucida Grandeをダブルクォーテーション（"）で囲んでいない」というミスがよくあります。

ひとつひとつしっかりマスターしていきましょう！