PCとスマホで挙動を変える！レスポンシブに対応その2

引き続きレスポンシブの挙動を変更する処理について学習していきましょう。今度はスクロール表示をPC/SPで挙動を変えてみましょう。

HTML/CSSの問題に挑戦しよう！

問題

「PCとスマホで挙動を変える！レスポンシブに対応その2」

【レスポンシブ】レスポンシブの挙動を変更しましょう!
PCでは、決められた幅でスクロールを表示し、
SPでは文字が入っているブロックを画面いっぱいにしましょう!

見本動画を参考にして実装してください。

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

                    <section class="wrapper" style="width: 470px;">
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</section>
¥HTML¥

期待する画面

解答と解説（PCとスマホで挙動を変える！レスポンシブに対応その2）

解説

LINE登録して解答を見る

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

高さや幅が決め打ちされていた時(px指定など)は
メディアクエリでautoを付与してあげます。

そうすることで、レスポンシブ時に画面幅いっぱいに表示することができます。

補足

サイズの指定方法には、絶対値と相対値というものがあります。

各ブラウザには、ブラウザ設定で文字の大きさを変更できる機能があります。
絶対値とは、ブラウザの設定の影響を受けない値のことで
px(ピクセル)単位で指定したものが絶対値となります。

相対値とは、逆にブラウザ設定の影響を受ける値のことで
%やem、rem単位で指定したものは相対値となります。