メディアクエリのprintの役割とは

こんにちは。Web制作を学んでいる、てらもです。

毎日コーディングをして、学んだことを１ツイート（てらも｜Web制作）しています。

文字数の限界がきたのでブログという形で記録に残すことにしました。
わからなかったことなど備忘録として記していきます。

今回は、「メディアクエリの設定でprintは何の役割を表しているのか」についてです。

この記事でわかること

メディアクエリって何？

メディアクエリのprintの役割は？

結論

メディアクエリって何？

メディアクエリとは、表示環境に合わせてレスポンシブデザインを実現できるCSSのことです。

端末や画面の大きさによってデザインを変えることが、レスポンシブデザインと言いますが、
それを実現するCSSがメディアクエリと呼ばれています。

メディアクエリの書き方はこちらです。

＠media メディアタイプ and (メディア特性）{ … }

・メディアタイプ（省略可、暗黙でallとみなされる）
all（すべてのデバイス) , screen（画面向け） , print （プリンター）,speech（音声合成）

・メディア特性（完全任意）
width（スクロールバーの幅を含むビューポートの幅）など他多数有
詳しくはこちら（MDNサイト）

記述例：
モバイルファーストで768px以上のスクリーンサイズにCSSを適用したい場合

@media screen and (min-width: 768px) { … }

本題です。printは、メディアクエリ設定時にメディアタイプとしてprintを指定できることはわかりました。

これを一体どんな時に使うのか？です。

結論、スマホ画面ではなくPC画面のスタイルで印刷する場合に、（上記の例で記述すると）
@media screen and (min-width: 768px) ,print{ … }
と記述してください。

たまに、クーポン券を見つけて画面印刷したい時に印刷すると
スマホの画面の状態で印刷されてしまうことってありませんか。

そのような事態にならないように、printを指定していればPC用など設定した条件スタイルで印刷が可能となるのです。

その他にも条件設定してメディアクエリを使用できるようですが、今のところそのようなコーディングには出会っていないのでそんなに使用することはないのかなと思います。

まとめ

メディアクエリのメディアタイプにprintを指定することで、プリンター向け（印刷仕様）のスタイルとして設定できます。
printを指定しなくても表示はされますが、印刷時も意識したコーディングを行うことで、様々なシーンを想定したコーディングとなり、ユーザビリティの向上につながります。

いつもはツイートで文字数気にして記載していましたが、ブログだとポイントや注意点など詳しく残していけるので学習記録にはもってこいですね。

次回も、コーディングで調べたことをまとめる形でブログを書いていきます。
といっても、毎日ググる繰り返しなのでものすごいたくさんの備忘録あります・・

うまくまとめていきます^^

最後までご覧いただきましてありがとうございました。