ログイン
問題3

【font-size】文字サイズを変更しよう

この問題では、文字フォントの大きさを変更する際に使用するプロパティを学習します。 文字フォントの大きさを変更するにはfont-sizeプロパティを使用します。 問題に挑戦してフォントサイズの調整を覚えましょう。

アイコン画像

本のアイコンfont-sizeプロパティとは

font-sizeプロパティとは、その名前の通り文字サイズを指定するためにCSSで用意されたプロパティになります。
Webデザイン上では、GoogleやAppleが推奨するフォントサイズである16px~14pxで設定されていることが多いです。
その為、各ブラウザで設定されているデフォルトサイズは概ね16pxになります。
デフォルトサイズとは、フォントサイズを指定しないでHTMLファイルに文字を記述し、表示されたサイズのことを言います。

本のアイコンfont-sizeで使用する単位

フォントサイズを指定する際に使用できる単位には様々なものがあります。
ここでは代表的なものだけを解説します。
・px(ピクセル)
pxは古くから使用されている文字単位で、画像の色情報を持つ最小単位でもあります。
pxの特徴は、どのデバイスやブラウザで表示しても固定のサイズで表示されることです。
このような値のことを「絶対値」と言います。
・%(パーセント)
%は、親要素に対して文字を何%で表示させるかを指定する単位です。
もし親要素のフォントサイズを32pxで設定していた場合、子要素を50%で設定するとフォントサイズは16pxになります。
このように親要素に影響される値のことを「相対値」と言います。
・em(エム)
emは、親要素に指定されたサイズが基準になる単位です。
例えば、親要素が20pxで設定されていた場合に子要素を「1em」で設定すると、親要素と同じ20pxになります。
つまり「親要素サイズ=1em」となり、「2em」で設定すると2倍の大きさで指定されます。
・rem(レム)
remは比較的新しい単位で、root emの略です。
ここでいうrootとは、ルート要素(html要素)を指しておりhtml要素で設定されたサイズを基準にする単位になります。
ルート基準なのでレスポンシブにも対応しやすく、emよりも全体のフォントサイズを一括で管理sいやすい特徴を持っています。html要素のフォントサイズが16pxであれば、どの要素で設定した場合も0.5remは8px、2remは32pxになります。

CSSの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。

問題3:【font-size】文字サイズを変更しよう

用意した複数の'ninjacode'の文字サイズを以下に変更してください。
1つ目:30px
2つ目:25px
3つ目:20px
4つ目:15px

エディターのアイコンあらかじめエディタに書くコード

                <p class="str_size">ninjacode</p>
  <p class="str_size2">ninjacode</p>
  <p class="str_size3">ninjacode</p>
  <p class="str_size4">ninjacode</p>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              .str_size {
  font-size: 30px;
}
.str_size2 {
  font-size: 25px;
}
.str_size3 {
  font-size: 20px;
}
.str_size4 {
  font-size: 15px;
}
¥CSS¥
            

コメントのアイコン解説

文字の大きさを変えるには「font-size」を使用しました。
font-sizeに指定する値には、固定値である「px」で指定する方法や可変値の「rem」で設定する方法があります。
「rem」は倍率で指定する方法になり、フォントサイズのデフォルトは16pxなので「2rem」と指定した場合は2倍の32pxとなります。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!