モバイルファースト
小さいほうから書く
いまの CSS は、土台に広い画面向けの指定が並び、せまい画面のことをあとから直す形になっています。この順番だと、スマホ用に打ち消す指定がどんどん増えて読みにくくなります。
そこで逆にします。土台にはスマホの見た目だけを書き、広い画面で足したいものだけを @media (min-width: 600px) の中に入れる。この書き方をモバイルファーストと呼びます。
打ち消しではなく上書きになる
たとえばナビゲーションです。スマホでは縦に積み、広い画面では横一列にしたい。土台に flex-direction: column を書き、メディアクエリの中で flex-direction: row に戻します。土台の指定はスマホでそのまま使われ、広い画面のときだけ 1 行が上書きされます。どちらの見た目も、読む場所が 1 か所ずつに決まるので追いやすくなります。
書くこと
ナビゲーション、プロフィール、フッターのリンクを、土台では flex-direction: column の縦並びにし、メディアクエリの中で row に戻します。送信ボタンは土台で width: 100% の全幅、広い画面で width: auto に戻します。
見出しと余白も、土台をスマホ向けの小さい値にして、大きい値のほうをメディアクエリへ移します。趣味タグとスキル表の文字も土台をスマホ向けの 0.875rem にします。この二つを広い画面で戻す指定は、次の章末仕上げで足すので、今回は土台だけで止めておいてください。
課題
.site-nav ulと.profileと.footer-linksを土台ではflex-direction: columnにし、メディアクエリの中でrowに戻す.submit-buttonを土台でwidth: 100%にし、メディアクエリの中でwidth: autoに戻すh1h2.section.site-header.site-footerの余白と文字を土台ではスマホ向けの小さい値にし、大きい値をメディアクエリへ移す.hobby-itemと.skill-tableのセルに、スマホ向けのfont-size: 0.875remを土台で足す