ログイン

問題34 pxを指定せずfont-sizeを変更しよう

HTML_CSSの問題

HTML_CSS

CSSで数値を指定する際の単位はpx以外にも存在します。 font-sizeなどにはよく使用される指定方法なので、覚えていきましょう。

pxを指定せずfont-sizeを変更しよう

問題

pxを使わずにfont-sizeを指定しましょう!
pタグの文字の大きさをpxを指定せず16pxにしてみましょう。

見本画像を参考にしてCSSに記述し実装してください。

自分の環境に書くコード

              <p>この文字をpxを指定せず16pxにしてください。</p>
<style>
    html {
        font-size: 20px;
    }
</style>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <p>この文字をpx指定せず16pxにしてください。</p>
<style>
  html {
    font-size: 20px;
  }
</style>
¥HTML¥
            
              p {
    font-size: .8rem;
}
¥CSS¥
            
答えのアイコン

解説

今回のfont-sizeの指定はremという単位を指定しましょう。

remはhtmlタグに指定されたものを基準としており
今回の場合であればhtmlタグに20pxが指定されているので、
1rem = 20px となります。

またhtmlタグにfont-sizeの指定がない場合は
標準サイズである16pxが1remとなります。
ログインして解答を見る
CSSでfont-sizeなどを指定する際はpx、em、remを使われることが多いです。
それぞれ簡単に解説していきます。
・px:CSSのサイズ設定で最も一般的な単位です。1pxはコンピュータやスマホのスクリーンにおいて1つのドットに相当します。
・em:指定する要素の親要素のfont-sizeを基準として相対的な値となります。
・rem:html要素のfont-size値を基準として相対的な値となります。指定がない場合はデフォルト値の16pxとなります。
他にもパーセント(%)で指定する方法や、ビューポート(vw、vh)で指定する方法もありますが、最初は特に難しく考えずpxを主に使っておけば大丈夫です。
余裕がでてきたら、borderにはpxを使い、メディアクエリではemを使うなど、場面に合わせて使い分けられるようにしておくと、より良いコーディングができるようになります。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!