問題
47スマホ時の挙動を変える！レスポンシブに対応
レスポンシブデザインとは、画面の大きさに合わせてレイアウトを柔軟に調整するWebデザインのことです。スマホの普及により、必須の設定と言えます。必ず覚えていきましょう。
HTML/CSSの問題に挑戦しよう！
問題
「スマホ時の挙動を変える！レスポンシブに対応」
レスポンシブを正しく理解しましょう!
スマホの時(画面幅が狭まった時)に文字の色を赤色にしましょう。
見本動画を参考にしてCSSに記述し実装してください。
あらかじめエディタに書くコード
<div class="block">
<p style="font-size: 20px;">この文字の色をスマホ時に赤色に変えよう</p>
</div>
¥HTML¥
期待する画面
解答と解説（スマホ時の挙動を変える！レスポンシブに対応）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
基本的にスマホに対応する為には
メディアクエリというものを使用します。
@media screen and (max-width: 768px)というものを使います。
記述は、解答ソースを参考にしてください。
画面幅が768以下の時という意味になります。
補足
レスポンシブの設定を行なう際は、
@media メディアタイプ and (メディア特性){指定したいCSSの記述}
というような構文を使用します。
メディアタイプとは、デバイスの種類のことでscreen、print、allなどがあります。
今回のようにscreenとするとプリンター以外のデバイス全ての設定が行なえます。
メディア特性では、画面の高さや幅など条件のことです。
そして波括弧内に指定したいスタイルを記述すればOKです。
複数のメディア特性を指定したい場合は、カンマで区切って(max-width: 420px), (orientation: portrait)というように記述しましょう。
and演算子を使っても同じように動きます。
