問題

47
HTML_CSS

【レスポンシブ】スマホ時の挙動を変える

レスポンシブデザインとは、画面の大きさに合わせてレイアウトを柔軟に調整するWebデザインのことです。スマホの普及により、必須の設定と言えます。必ず覚えていきましょう。

HTML_CSSの問題に挑戦しよう!

問題

【レスポンシブ】スマホ時の挙動を変える

レスポンシブを正しく理解しましょう!

スマホの時(画面幅が狭まった時)に文字の色を赤色にしましょう。
見本動画を参考にしてCSSに記述し実装してください。

あらかじめエディタに書くコード

                    <div class="block">
    <p style="font-size: 20px;">この文字の色をスマホ時に赤色に変えよう</p>
</div>
¥HTML¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

基本的にスマホに対応する為には
メディアクエリというものを使用します。

@media screen and (max-width: 768px)というものを使います。
記述は、解答ソースを参考にしてください。

画面幅が768以下の時という意味になります。

補足

レスポンシブの設定を行なう際は、
@media メディアタイプ and (メディア特性){指定したいCSSの記述}
というような構文を使用します。
メディアタイプとは、デバイスの種類のことでscreen、print、allなどがあります。
今回のようにscreenとするとプリンター以外のデバイス全ての設定が行なえます。
メディア特性では、画面の高さや幅など条件のことです。
そして波括弧内に指定したいスタイルを記述すればOKです。
複数のメディア特性を指定したい場合は、カンマで区切って(max-width: 420px), (orientation: portrait)というように記述しましょう。
and演算子を使っても同じように動きます。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET