ログイン
問題47

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

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

アイコン画像

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

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

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

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

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

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

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

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

コメントのアイコン解説

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

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

画面幅が768以下の時という意味になります。
ログインして解答を見る

コメントのアイコン補足

レスポンシブの設定を行なう際は、
@media メディアタイプ and (メディア特性){指定したいCSSの記述}
というような構文を使用します。
メディアタイプとは、デバイスの種類のことでscreen、print、allなどがあります。
今回のようにscreenとするとプリンター以外のデバイス全ての設定が行なえます。
メディア特性では、画面の高さや幅など条件のことです。
そして波括弧内に指定したいスタイルを記述すればOKです。
複数のメディア特性を指定したい場合は、カンマで区切って(max-width: 420px), (orientation: portrait)というように記述しましょう。
and演算子を使っても同じように動きます。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる