プロゲートの文字の大きさと種類レッスンの解説とよくあるミス
コアラ
文字の種類もCSSで指定できるんだね!
ひつじのジョージ
おしゃれなサイトではよく文字の種類を変更しているね。

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

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

このレッスンでマスターすること
  • font-sizeプロパティの使い方
  • font-familyプロパティの使い方

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

文字の大きさと種類レッスンで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";
  
}

よくあるミス

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

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

よくあるミス
  • プロパティのタイプミス
  • Lucida Grandeをダブルクォーテーション(")で囲んでいない
コアラ
Lucida Grandeだけダブルクォーテーション(")で囲む必要があるのか。。
ひつじのジョージ
Lucida Grandeは2つの単語があるから、ダブルクォーテーション(")で囲って文字として認識してもらう必要があるよ。

よくあるミス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プロパティの使い方」です。

このレッスンでマスターすること
  • font-sizeプロパティの使い方
  • font-familyプロパティの使い方

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

よくあるミス
  • プロパティのタイプミス
  • Lucida Grandeをダブルクォーテーション(")で囲んでいない

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

おすすめの記事