ログイン

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

HTML_CSSの問題

HTML_CSS

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

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

問題

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

スマホの時(画面幅が狭まった時)に文字の色を赤色にしましょう。
見本動画を参考にして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演算子を使っても同じように動きます。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!