演習課題「メディアタイプを指定してみよう」
現在、メディアタイプを記述して、印刷再現用デバイスのメディアにCSSを適用しようとしています。
メディアクエリを指定し、印刷再現用デバイスのメディアにおける横幅が1200px以下の時にp要素の色が#386e9cに変わるよう変更してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃04:メディアタイプの指定
このチャプターでは、メディアタイプの指定について学習します。
メディアタイプは記述したスタイルを、どのメディアに適応するかを指定するために用いられます。
メディアタイプ単体での指定をすることも可能ですが、前のチャプターと同様にandで他の条件と組み合わせて記述することも可能です。
現在推奨されているメディアタイプとしては、
・すべての装置に適応するall
・印刷機や印刷表示の再現を意図する装置に適応するprint
・print以外のすべての装置に適応するscreen
があります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/@media#%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E7%A8%AE%E5%88%A5
@charset "UTF-8";
h1, p {color: red;}
@media print and (min-width: 500px){
p {color: blue;}
}