ログイン
問題48

【レスポンシブ】タブレットに対応しよう

今度はタブレットに対応するメディアクエリの設定を行なっていきましょう。 レスポンシブデザインでは、各デバイスに合わせた設定を行なっておくことが望ましいとされています。 問題を通してタブレットにも対応できるデザインを行なっていきましょう。

アイコン画像

問題48:【レスポンシブ】タブレットに対応しよう

初級47に引き続きレスポンシブの理解を深めていきましょう。

1. タブレットの画面幅の時、文字の色を緑色
2. スマホの時、文字の色を赤色にしましょう。

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

エディターのアイコンあらかじめエディタに書くコード

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

ブラウザのアイコン期待する画面

タグアイコン解答ソースコード

              <div class="block">
  <p style="font-size: 20px;">この文字の色をスマホ時に赤色に変えよう</p>
</div>
¥HTML¥
            
              /* ipadの挙動 */
@media screen and (max-width: 1024px) {
    .block p {
        color: green;
    }
}
/* スマホ時の挙動 */
@media screen and (max-width: 768px) {
    .block p {
        color: red;
    }
}
¥CSS¥
            

コメントのアイコン解説

メディアクエリを複数箇所設置することを”ブレイクポイント”と言います。

タブレット、SP(スマホ)対応で挙動を変更したい時など
ブレイクポイントの切り分けを上手く使っていきましょう!
ログインして解答を見る

コメントのアイコン補足

ブレイクポイントの書き方としては、大きく2つのパターンがあります。

一つ目はモバイルファースト、二つ目はデスクトップファーストの書き方です。
min-widthを用いて小さい→大きい順で記述するのがモバイルファースト、
max-widthを用いて大きい→小さい順で記述するのがデスクトップファーストです。
近年では、モバイルファーストの書き方が主流になってきているようですが、どちらでも大丈夫かと思います。

また、設定値の基準としては、
スマホは768pxまで、タブレットは1024pxまで
が今の時代では一般的に多いかと思います。
これらの基準は今後変わっていくと思われるので、一概にこれが正しいわけではないです。参考程度に留めておいていただければと思います。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる