演習課題「複数条件を適用してみよう - その1」
現在、メディアクエリに適用する条件としてandを用いて複数の条件を指定しようとしています
メディアクエリを指定し、ブラウザの横幅が480px以上、1200px以下の範囲内で、p要素の色が#386e9cに変わるよう変更してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「複数条件を適用してみよう - その2」
現在、メディアクエリに適用する条件として,を用いて複数の条件を指定しようとしています
メディアクエリを指定し、ブラウザの横幅が480px以下、1200px以上の時にp要素の色が#386e9cに変わるよう変更してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃03:複数条件の適用
このチャプターでは、複数条件の適用について学習します。
メディアクエリは適用する条件をandか,で組み合わせることで複数指定することができます。
条件をandでつなぐと、複数の条件をすべて満たした場合にのみスタイルが適用されるようになり、,でつなぐと、いずれかの条件を一つでも満たした場合にスタイルが適用されるようになります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/@media#%E8%AB%96%E7%90%86%E6%BC%94%E7%AE%97%E5%AD%90
@charset "UTF-8";
h1, p {color: red;}
@media (min-width: 600px) and (max-width: 900px){
p {color: blue;}
}
@charset "UTF-8";
h1, p {color: red;}
@media (max-width: 600px) , (min-width: 900px){
p {color: blue;}
}