章末仕上げ 全画面対応
残りを両対応にする
前回、土台をスマホの見た目に書き換えました。ただ、広い画面に戻す指定をいくつか入れていません。趣味タグとスキル表の文字は小さいまま、作品カードの 2 マス結合はメディアクエリの回で外したままです。パソコンで開くと、表も作品も少し窮屈に見えるはずです。ここを埋めて、この章を終わりにします。
足りないものを見つける手順
やり方は毎回同じです。まずプレビューの幅を広げて、気になるところを探します。次に、その要素の指定が土台とメディアクエリのどちらにあるかを見ます。スマホでちょうどよく、パソコンで物足りないなら、足すのはメディアクエリの中です。逆にスマホで崩れているなら、直すのは土台です。この二択で考えると迷いません。
書くこと
メディアクエリの中に、趣味タグの font-size: 1rem、スキル表のセルの padding と font-size、そして .work-card:first-child の grid-column を足します。これで一番目の作品カードが広い画面でだけ 2 マスぶんに広がり、表の文字も読みやすい大きさに戻ります。
書き終えたら、プレビューの幅をせまくしたり広げたりして、どちらでも横スクロールが出ないか、文字がつぶれていないかを確かめてください。ここまでできれば、この章の目標である全画面対応は達成です。
課題
- メディアクエリの中に
.hobby-itemのfont-size: 1remを足す - メディアクエリの中に
.skill-tableのセルのpadding: 0.625rem 0.75remとfont-size: 1remを足す - メディアクエリの中に
.work-card:first-childのgrid-column: 1 / 3を足す