HTML_CSS
LINEでログイン
Googleでログイン
Twitterでログイン問題48：【レスポンシブ】タブレットに対応しよう
初級47に引き続きレスポンシブの理解を深めていきましょう。
1. タブレットの画面幅の時、文字の色を緑色
2. スマホの時、文字の色を赤色にしましょう。
見本動画を参考にしてCSSに記述し実装してください。
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¥
補足
ブレイクポイントの書き方としては、大きく2つのパターンがあります。
一つ目はモバイルファースト、二つ目はデスクトップファーストの書き方です。
min-widthを用いて小さい→大きい順で記述するのがモバイルファースト、
max-widthを用いて大きい→小さい順で記述するのがデスクトップファーストです。
近年では、モバイルファーストの書き方が主流になってきているようですが、どちらでも大丈夫かと思います。
また、設定値の基準としては、
スマホは768pxまで、タブレットは1024pxまで
が今の時代では一般的に多いかと思います。
これらの基準は今後変わっていくと思われるので、一概にこれが正しいわけではないです。参考程度に留めておいていただければと思います。
一つ目はモバイルファースト、二つ目はデスクトップファーストの書き方です。
min-widthを用いて小さい→大きい順で記述するのがモバイルファースト、
max-widthを用いて大きい→小さい順で記述するのがデスクトップファーストです。
近年では、モバイルファーストの書き方が主流になってきているようですが、どちらでも大丈夫かと思います。
また、設定値の基準としては、
スマホは768pxまで、タブレットは1024pxまで
が今の時代では一般的に多いかと思います。
これらの基準は今後変わっていくと思われるので、一概にこれが正しいわけではないです。参考程度に留めておいていただければと思います。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
タブレット、SP(スマホ)対応で挙動を変更したい時など
ブレイクポイントの切り分けを上手く使っていきましょう!