HTML_CSS
Googleでログイン問題47：【レスポンシブ】スマホ時の挙動を変える
レスポンシブを正しく理解しましょう!
スマホの時(画面幅が狭まった時)に文字の色を赤色にしましょう。
見本動画を参考にしてCSSに記述し実装してください。
スマホの時(画面幅が狭まった時)に文字の色を赤色にしましょう。
見本動画を参考にして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 メディアタイプ and (メディア特性){指定したいCSSの記述}
というような構文を使用します。
メディアタイプとは、デバイスの種類のことでscreen、print、allなどがあります。
今回のようにscreenとするとプリンター以外のデバイス全ての設定が行なえます。
メディア特性では、画面の高さや幅など条件のことです。
そして波括弧内に指定したいスタイルを記述すればOKです。
複数のメディア特性を指定したい場合は、カンマで区切って(max-width: 420px), (orientation: portrait)というように記述しましょう。
and演算子を使っても同じように動きます。
@media メディアタイプ and (メディア特性){指定したいCSSの記述}
というような構文を使用します。
メディアタイプとは、デバイスの種類のことでscreen、print、allなどがあります。
今回のようにscreenとするとプリンター以外のデバイス全ての設定が行なえます。
メディア特性では、画面の高さや幅など条件のことです。
そして波括弧内に指定したいスタイルを記述すればOKです。
複数のメディア特性を指定したい場合は、カンマで区切って(max-width: 420px), (orientation: portrait)というように記述しましょう。
and演算子を使っても同じように動きます。
#忍者CODE無料問題集で活動を記録しよう
完了にする！
1.HTMLの宣言をしてみよう
メディアクエリというものを使用します。
@media screen and (max-width: 768px)というものを使います。
記述は、解答ソースを参考にしてください。
画面幅が768以下の時という意味になります。