スマホ対応せよ

中段 / 目安 30分

陽葵さんがスマホを差し出してきました。画面には、3列に並んだメニューが横にぎゅうぎゅうに潰れて表示されています。「うちのお客さん、ほぼスマホなの! これ、文字が全部縦になっちゃってて…1列にできない?」

パソコンで気持ちよく見えるレイアウトが、スマホで気持ちよく見えることはまずありません。幅が違えば、置き方も変わるのが当たり前です。CSS はこれをメディアクエリという書き方で解きます。

@media (max-width: 768px) は「画面の幅が768px以下のときだけ、この中のルールを使う」という意味です。中に書くのは、上書きしたいものだけで構いません。3列を1列にしたいなら grid-template-columns の1行だけ書き直せば済みます。全部を書き直そうとしないでください。

順番に1つ注意があります。メディアクエリは 普段のルールより後ろ に書きます。CSS は同じ強さのルールなら後に書いたほうが勝つので、前に置くと普段のルールに上書きされて何も起きません。効かないときはまずこの順番を疑ってください。

ナビゲーションも同じ考え方です。横並びにしている flex-direction を、狭いときだけ column に変えれば縦に積まれます。

完成条件

• メニューを grid で3列に並べる (普段の表示)
• ナビゲーションを flex で横並びにする (普段の表示)
• @media (max-width: 768px) を書き、その中でメニューを1列、ナビを縦並びに上書きする

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

判定は普段の3列とナビの横並びまでしか見ません。メディアクエリが効いているかは、ブラウザの幅を実際に狭めて自分の目で確かめてください。幅を変えて崩れないと確認するところまでが、この問題です。

1. .menu-grid を display: grid にし、grid-template-columns で3列に並べて gap で間隔を空ける
2. .nav-list を display: flex で横並びにする
3. @media (max-width: 768px) を書き、その中で .menu-grid を1列に上書きする
4. 同じメディアクエリの中で .nav-list を flex-direction: column にして縦並びに上書きする