モバイルファースト

小さいほうから書く

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

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

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

たとえば商品カードの一覧です。スマホでは一列にし、広い画面では二列にしたいとき、次のように書きます。

.product-list {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

土台の指定はスマホでそのまま使われ、広い画面のときだけ 1 行が上書きされます。どちらの見た目も、読む場所が 1 か所ずつに決まるので追いやすくなります。

書くこと

今回はナビゲーションの並ぶ方向と送信ボタンの幅を切り替えます。土台ではナビを縦並び、ボタンを全幅にし、広い画面では横並びと内容に合う幅へ戻します。Flexbox の並ぶ方向は flex-direction で指定します。column は縦、row は横です。ボタンの幅は width で指定し、100% は親と同じ幅、auto は内容に合う幅です。四つのコメントの場所に指定を書いてください。

プロフィールやフッターの切り替え、見出しと余白の移動はひな形に用意しました。文章の伸縮指定も横並びになる広い画面へ移してあります。趣味タグとスキル表を広い画面で戻す指定は、次回に足します。

1. .site-nav ul を土台では flex-direction: column にし、メディアクエリの中で row に戻す
2. .submit-button を土台で width: 100% にし、メディアクエリの中で width: auto に戻す
3. プロフィール・フッター・見出し・余白の切り替えは準備済み。コメントのある四つの指定を書く