モバイルファースト

小さいほうから書く

いまの CSS は、土台に広い画面向けの指定が並び、せまい画面のことをあとから直す形になっています。この順番だと、スマホ用に打ち消す指定がどんどん増えて読みにくくなります。

そこで逆にします。土台にはスマホの見た目だけを書き、広い画面で足したいものだけを @media (min-width: 600px) の中に入れる。この書き方をモバイルファーストと呼びます。

打ち消しではなく上書きになる

たとえばナビゲーションです。スマホでは縦に積み、広い画面では横一列にしたい。土台に flex-direction: column を書き、メディアクエリの中で flex-direction: row に戻します。土台の指定はスマホでそのまま使われ、広い画面のときだけ 1 行が上書きされます。どちらの見た目も、読む場所が 1 か所ずつに決まるので追いやすくなります。

書くこと

ナビゲーション、プロフィール、フッターのリンクを、土台では flex-direction: column の縦並びにし、メディアクエリの中で row に戻します。送信ボタンは土台で width: 100% の全幅、広い画面で width: auto に戻します。

見出しと余白も、土台をスマホ向けの小さい値にして、大きい値のほうをメディアクエリへ移します。趣味タグとスキル表の文字も土台をスマホ向けの 0.875rem にします。この二つを広い画面で戻す指定は、次の章末仕上げで足すので、今回は土台だけで止めておいてください。

1. .site-nav ul と .profile と .footer-links を土台では flex-direction: column にし、メディアクエリの中で row に戻す
2. .submit-button を土台で width: 100% にし、メディアクエリの中で width: auto に戻す
3. h1 h2 .section .site-header .site-footer の余白と文字を土台ではスマホ向けの小さい値にし、大きい値をメディアクエリへ移す
4. .hobby-item と .skill-table のセルに、スマホ向けの font-size: 0.875rem を土台で足す