問題
48【レスポンシブ】タブレットに対応しよう
今度はタブレットに対応するメディアクエリの設定を行なっていきましょう。 レスポンシブデザインでは、各デバイスに合わせた設定を行なっておくことが望ましいとされています。 問題を通してタブレットにも対応できるデザインを行なっていきましょう。
HTML/CSSの問題に挑戦しよう！
問題
「【レスポンシブ】タブレットに対応しよう」
初級47に引き続きレスポンシブの理解を深めていきましょう。
1. タブレットの画面幅の時、文字の色を緑色
2. スマホの時、文字の色を赤色にしましょう。
見本動画を参考にしてCSSに記述し実装してください。
あらかじめエディタに書くコード
<div class="block">
<p style="font-size: 20px;">この文字の色をスマホ時に緑色/赤色に変えよう</p>
</div>
¥HTML¥
期待する画面
解答と解説（【レスポンシブ】タブレットに対応しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
メディアクエリを複数箇所設置することを”ブレイクポイント”と言います。
タブレット、SP(スマホ)対応で挙動を変更したい時など
ブレイクポイントの切り分けを上手く使っていきましょう!
補足
ブレイクポイントの書き方としては、大きく2つのパターンがあります。
一つ目はモバイルファースト、二つ目はデスクトップファーストの書き方です。
min-widthを用いて小さい→大きい順で記述するのがモバイルファースト、
max-widthを用いて大きい→小さい順で記述するのがデスクトップファーストです。
近年では、モバイルファーストの書き方が主流になってきているようですが、どちらでも大丈夫かと思います。
また、設定値の基準としては、
スマホは768pxまで、タブレットは1024pxまで
が今の時代では一般的に多いかと思います。
これらの基準は今後変わっていくと思われるので、一概にこれが正しいわけではないです。参考程度に留めておいていただければと思います。
