・Web制作で作成したページを印刷しようとしたらレイアウトが崩れてる
・印刷するときだけに適用させるCSSを指定するにはどうしたらいい？
こういったお悩みや疑問を解決していきます！
今回はCSSと印刷についての記事です。
Web制作をしていて先方から「印刷した時にレイアウトから崩れてるから、いい感じに印刷できるようにしてほしい」「印刷の際はここの部分だけ表示させないようにしてほしい」などと言われることありますよね？
印刷時に適用されるCSSを書く方法を解説していきます。
後半には自分が実務でよく使っている裏技的方法も紹介するのでぜひ最後まで読んでいってください！
印刷時に適用させるCSSを書く方法
印刷するときに適用させるCSSを書く方法がいくつかあるのでそれを紹介していきます。
印刷用のCSSを作成し、読み込み方法を指定する
まず1つ目は印刷時に指定するCSSを作成してそのCSSファイルを印刷時のみに読み込む方法です。
印刷時のみに読み込ませる方法は以下のような書き方です。
<link rel="stylesheet" href="./assets/css/style.css" media="all" />
<link rel="stylesheet" href="./assets/css/print.css" media="print" />ここで大事なのは「media=””」の部分です。
普段CSSを読み込ませるときに「media=”screen”」もしくは「media=”all”」などど書いていると思います。
これはCSSを読み込む条件のようなもので「screen」であればパソコンのみで表示され、「all」であればそべてのメディアで読み込まれます。
そして今回印刷用に追加したCSSは「print.css」です。こちらは「media=”print”」と指定しています。
これは「プリンターで印刷するときのみに読み込む」といった意味になるのでこれで印刷時のみに反映させるスタイルを指定することができます。
読み込む順番は「print.css」を最後にするようにしましょう。「print.css」の方が上にあると、「media=”all”」で読み込んでいる「style.css」で上書きされてしまうからです。
「@media print」を使って指定する方法
2つ目はCSSファイル内の記述によって印刷用のスタイルを記述していく方法です。
書き方はこんな感じです。
@media print {
body {
background: red;
}
}「@media print」とすることでその中のCSS印刷するときのみに反映されます。
1つ目の方法と違って同じCSSファイルの中にまとめることができるので、ファイルを増やしたくない人にはおすすめです。
印刷時のCSS指定の裏技
ここまでは印刷時のCSSの指定方法を紹介してきました。
最後に自分がよくする裏技を紹介して終わりたいと思います。
結論は「zoom」を使うことです。
印刷するときは、ブラウザで表示していたものをA4などのサイズに合わせて調整しなければいけません。
pxなどで指定していたものも印刷用に縮小して調整しなければいけないため正直かなり面倒です。笑
ここで使えるのが「zoom」です。これは要素を拡大縮小をするときに使うのですがこれを印刷時にbody全体に指定してあげるといい感じになることが多いです。
@media print {
body {
zoom: 0.6;
}
}こんな感じ。
これで印刷時はbody要素が60％の大きさになります。PCの表示だとどうしても横長のサイズに合わせてコーディングしているのでこれで大まかなサイズ感を調整することができます。
細かい調整は必要になりますが知っておいて損はないと思います。
印刷の対応が必要になってもこれで安心
いかがだったでしょうか。
印刷時のCSSの指定方法と裏技的方法をご紹介しました。
急な印刷対応が来ても落ち着いて対応しましょう〜。
こちらの記事では印刷時のスタイルをChromeのデベロッパーツールを使って効率良く確認する方法を紹介しているので合わせて読んでみてください！
