【CSS】印刷用のスタイルを指定する方法
なぜ必要か
例えば、QRコードや予約完了画面など、ユーザーが残しておきたい情報がある場合に、サイトの画面を印刷する場面が出てきます。
ただ、何もしていないと、デザインによっては印刷時に大幅に崩れてしまいます。
最近はスクショもできますし、使用頻度はあまり高くありませんが、重要なページについては綺麗に整えておくと親切です。
印刷ボタンの実装は、こちらの記事をご覧ください！
【jQuery】印刷ボタンを作成する
【簡単】メディアクエリを使って読み込む
いくつか方法がある中で、個人的に一番シンプルだと思うやり方です。
CSSにメディアクエリ@media printを記述し、このの中に印刷用のスタイルを定義していきます。
@media print {
/* 印刷用のスタイルを記述 */
}
その他3つの読み込み方法
- 通常のCSSファイルとは別に印刷用のCSSファイル用意して、HTMLのheadに
media="print"と指定して読み込む。
<link rel="stylesheet" href="style.css"> <!-- スクリーン用CSS -->
<link rel="stylesheet" media="print" href="print.css"> <!-- プリント用CSS -->
- 通常のCSSファイルとは別に印刷用のCSSファイル用意して、
@importを使って印刷用CSSをスクリーン用のCSSに読み込む。
@import url("print.css") print;
- HTMLの中に直接スタイルを書き込む。
<style media="print">
/* 印刷用CSSの定義を指定する */
</style>
あらかじめ印刷時の詳細を設定する
@pageを使うと、用紙のサイズや余白をあらかじめ設定しておくことができます。
@page {
size: A4; /* A4縦 */
size: B4 landscape; /* B4 横向き */
size: 210mm 297mm; /* 数値で指定 */
margin: 1cm; /* 余白 */
}
人によって印刷の設定は異なるでしょうから、初めから指定してあげるとユーザーに優しいですね。
改ページしたいとき
break-before: page;で指定した要素の直前で改行することができます。
@media print {
.break {
break-before: page;
}
}
ブラウザ別デバッグの仕方
開発者ツールの設定をすれば、いちいち印刷画面を開いて確認しなくても、ブラウザで見た目を確認しながら開発を進めることができます。
- Google Chrom
開発者ツール > 設定 > More tools > Rendaring を開く。
Rendaringというタブが出現するので、Emulate CSS media typeをprintにする。
- Firefox
開発者ツールを開いて、CSSを表示 > printに切り替えで確認できます。
-
Microsoft Edge
Google Chromとまったく同じ手順で確認できます。
さいごに
最近、「何に使うん？🤔」というページで印刷用のスタイルを整えてほしい、という依頼がありました。こういうこともあるってことです。
あまり使わない分、いざ出てきたときに「どうやるんだっけ？」となるので、備忘録としてまとめました。
Twitterでは随時、質問受け付けております！
分からないことなどあればお気軽にDMください♪
参考
Discussion