CSSとprintを使った印刷用ページの作成方法とは？印刷サイズの指定方法も解説
Webサイト作成で、印刷用のCSSを設定する方法について悩んではいませんか？
ブラウザ表示とは別に、印刷用の表示を作成したいときがありますよね。
印刷用CSSには、「print」というメディアタイプを使うことになります。
今回は、印刷用CSSの設定方法をマスターしたい、という方のために、
- メディアタイプのprintとは？
- CSSで指定する方法について
- 指定する際の注意点
以上の項目に沿って、解説していきますね。
この記事を読めば、CSSとメディアタイプのprintを使用して、印刷用の表示が作成できるようになりますよ。
ぜひ最後まで読んでくださいね！
印刷用CSSを作成する4つの方法
印刷時の表示を見やすくするためには、ブラウザとは別の印刷用のスタイルシートを設定する必要があります。
印刷用CSSを作成し、それをサイトに適用させる際に、メディアタイプというものが重要となります。
パソコンやスマホのブラウザ以外に、印刷やプロジェクターなどの表示方法を設定したい場合、メディアタイプを用いて、CSSがどの媒体に対応しているのかを示すことができます。
印刷用のメディアタイプには「print」を使用します。
よく使われるメディアタイプには、以下のものがあります。
- all（初期値）：すべて
- braille：点字ディスプレイ
- print：印刷
- projection：プロジェクター
- screen：パソコンやスマホなどのスクリーン
- tv：テレビ
このようなメディアタイプをmedia属性、または、@mediaで指定することにより、それぞれの表示方法を設定することができます。
では、具体的に印刷用CSSを設定する方法を解説していきましょう。
方法は以下の4つとなります。
印刷用CSSをlink要素で読み込む
1つ目はCSSファイルを作成し、link要素を使ってHTMLに読み込む方法です。
<link rel="stylesheet" href="ptint.css" media="print">「media=”print”」の部分で、メディアタイプを指定しています。
「ptint.css」は読み込むファイル名です。
以下のように記述すると、別々のCSSファイルを読み込み、それぞれの媒体にスタイルを適用します。
<link href="sample.css" rel="stylesheet" media="screen">
<link href="print.css" rel="stylesheet" media="print" >メディアタイプを複数指定することもできます。
<link href="style01.css" rel="stylesheet" media="screen,print">CSSファイル内でメディアクエリを指定する
CSSファイルを分けるのではなく、1つのファイル内で印刷用のCSSを定義することができます。
メディアクエリは、以下のようにを指定します。
@media print{
/* 印刷用CSSを指定する*/
}このようなメディアクエリは、レスポンシブサイトを作成するときにも使用しますね。
具体的にHTMLとCSSを記述し、どのように表示されるのか確認してみましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>印刷用CSSを定義</title>
<link href="style02.css" rel="stylesheet" media="all">
</head>
<body>
<h1>CSSを印刷用に対応させる方法</h1>
<p>メディアクエリを使って、印刷用CSSを定義する</p>
</body>
</html>「media=”all”」は初期値でもあるので省略可能です。
CSSファイルは以下のように記述します。
@media screen{
h1 {color: red;}
p {color: brown;}
}
@media print{
h1 {color: blue;}
p {color: skyblue;}
}これにより、パソコンなどのスクリーンの表示と印刷用の表示を、別々に定義することができました。
印刷用の表示も確認してみてくださいね。
GoogleChromeなどのブラウザでは、印刷プレビューの他、デベロッパーツールでも表示を確認することが可能です。
style要素内に記述する
HTMLのhead内にstyle要素を書き込む方法があります。
<style type="text/css" media="print">
印刷用CSSを指定する
<style>ここでも「media=”print”」を使って、CSSを印刷用に定義します。
印刷用CSSファイルをインポートする
印刷用のCSSファイルを作成し、インポートで読み込む方法です。
@import url("print.css") print;他のCSSファイル内に記述するか、HTMLのhead内のstyle要素に書き込むことで適用されます。
印刷用CSSの作成で注意したいこと
印刷用CSSを設定する方法が、分かっていただけたでしょうか。
続いて、印刷用CSSを作成する際に気をつけるべき点や応用として役立つ点について紹介します。
不要な箇所の非表示について
印刷用CSSを作成する際に、すべてのスタイルを設定しなおす必要はありません。
Webサイト上では便利な機能でも、印刷上では不要な箇所があります。
そのような箇所は、非表示などで対応すると、全体が見やすくなります。
具体的には、
- トップページの全画面画像
- スライド画像
- リンクURL
- 戻るボタン
などです。
これらの要素は、「display: none」を使うなどして非表示にすると良いでしょう。
用紙サイズの指定について
CSSで「@page」を用いると、印刷時の用紙サイズを指定することができます。
/* A4サイズ縦 */
@page {
size: A4;
}
/* A4サイズ横 */
@page {
size: A4 landscape;
}数値を用いても指定ができるほか、marginの指定も可能です。
/* A4サイズを数値で指定 margin指定 */
@page {
size: 210mm 297mm;
margin: 15mm 22mm
}PDFのサイズを指定したい場合に、pxを使用する方法もありますね。
@page {
size: 640px 480px;
}ページの分割について
印刷をする際に、ページ分割する箇所を自分で設定したいときがあるかと思います。
ページ分割にはCSSの「break-before」プロパティを使用します。
HTMLで、分割したい箇所にclass名を指定します。
<div class="pages">
1ページ目
</div>
<div class="pages">
2ページ目
</div>CSSで、以下のような指定をすることでページ分割することができます。
@page {
size: 640px 480px;
}
.pages {
break-before: page;
}上記の印刷プレビューを見てみると、「横640px、縦480px」サイズの用紙が2ページに分割されていることが確認できますね。
まとめ：印刷用CSSを設定してみよう
今回は、「print」を使って印刷用CSSを作成する方法を解説してきました。
そのほか、印刷用紙のサイズ変更の仕方や分割の仕方もお伝えしましたね。
これまで、印刷用のCSSを意識したことがなかった方も、今後どこかで必要になるかと思います。
印刷用CSSを作成する際に、今回の記事が参考になれば幸いです。
