演習課題「レスポンシブWebデザインを試してみよう」
現在、レスポンシブWebデザインを用いて、ブラウザの大きさに合わせてそれぞれ異なるデザインを適用しようとしています。
メディアクエリを指定し、ブラウザの横幅が1200pxを超えたらp要素の色が#386e9cに変わるよう変更してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃02:レスポンシブWebデザイン
このチャプターでは、レスポンシブWebデザインについて学習します。
レスポンシブWebデザインは、メディアクエリを利用して、スマートフォンやPCなどの画面サイズが異なるデバイスに合わせてデザインを最適化することでWebサイトを見やすくする手法で、マルチデバイスに対応するための基本手法です。
主にメディアクエリでビューポートの横幅に応じて異なるルールセットを適用することで実現しています。
レスポンシブWebデザインでは、1つのHTMLにデバイスごとのCSSを用意して、サイズに合わせてデザインを変化させますが、大きな画面でレイアウトが横に広がりすぎないように、max-widthで横幅の最大値を指定しておくのが一般的になっています。
MDN web docs
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
@charset "UTF-8";
h1, p {color: red;}
@media (min-width: 960px){
p {color: blue;}
}