相対単位

px は動かない単位

ここまでの CSS は、長さのほとんどを px で書いてきました。px は画面の点の数そのものなので、どんな端末でも同じ大きさで固まります。画面に合わせて伸び縮みしてほしい場所には向きません。そこで相対単位を使います。何かを基準にした割合で長さを決める単位のことです。

三つの相対単位

rem は、ページの基準になる文字サイズを 1 とする単位です。既定では 1rem が 16px なので、24px は 1.5rem になります。利用者がブラウザの文字サイズ設定を大きくすると、rem で書いた文字も余白もいっしょに大きくなります。文字と余白は rem で書くのが基本です。

% は親要素に対する割合です。width: 100% なら親と同じ幅まで伸びます。vw は画面幅を 100 とする単位で、40vw は画面幅の 40 パーセントぶんです。親ではなく画面そのものに連動させたいときに使います。

書くこと

今回は body の余白と h1 の文字サイズ・下の余白を rem で書きます。ほかの換算はひな形に用意してあります。.site-main の幅は width: 100% と max-width: 45rem の組み合わせにして、せまい画面では画面いっぱい、広い画面では 45rem で止まるようにします。

プロフィール写真は width: 40vw と max-width: 10rem にします。画面幅に合わせて縮みながら、大きくなりすぎることもない形です。高さはひな形の auto を使います。文字間隔の 2px はそのまま残します。

1. body の内側の余白を 1rem、h1 の文字サイズを 2.5rem、上と左右の余白を 0、下の余白を 0.5rem にする
2. .site-main を width: 100% と max-width: 45rem にする
3. .profile-photo を width: 40vw と max-width: 10rem にする
4. .profile-text の flex-basis を 16rem にする。ほかの換算と画像の高さは準備済み