A4サイズ印刷専用WEBページを作る方法について
WEBページをA4サイズで印刷できるようにする場合、様々な設定が必要になります。
A4で連続して印刷される場合と、A4用紙1枚で収まるケースとでCSSが変わってきます。
印刷ボタンを非表示にしたり、ヘッダー・フッターを非表示にする設定も忘れずにおこないましょう。
任意に印刷向けWEBページを作る
本記事はA4印刷向けのWEBページを作る大まかな手順です。
印刷を前提としたページを前もって準備するタイプですね。
印刷を前提としていないWEBページをユーザーが印刷する場合、ある程度ユーザー任せで構わないと思います。
元々印刷向けに作っていない事を唄っておけば、多少レイアウトが変でも文句は言われないはずです。
あえて印刷ボタンを準備するケース
しかしあえて印刷専用ページとして公開する場合は、きちんとした整備が必要になります。
まず内容はA4判サイズに収まるコンテンツを準備するようにしましょう。
印刷専用ページを用意し、かつ印刷ボタンを準備して、印刷ダイアログのパネルが表示されるまでを紹介します。
WEBページのレイアウト
一般的なA4サイズは上記の通りです。
今回はA4の縦長で印刷されるWEBページを準備します。
A4の縦長ページの構築
HTMLソース
<body> <section class="page"> </section> </body>
上記を踏まえてCSSでベースのレイアウト枠（縦長）を設定します。
A4縦用ページCSS
@page { size: A4 portrait; margin: 0mm; }
sizeプロパティを使ってでA4を指定します。
portraitは縦長設定を意味し、横長の場合はlandscapeと指定します。
marginを0mmにする事で、ヘッダーフッターが表示されない様になります。
もしくは印刷ダイアログパネルから任意にヘッダー・フッターの表示を切る方法もあります。
A4縦長1ページの構築
A4サイズで何枚か印刷されるのではなく、1ページに収める場合のレイアウトです。
A4縦用1ページCSS
A4判の印刷サイズ1ページは、一般的に以下の幅と高さになります。
.page{ width: 210mm; height: 297mm; box-sizing: border-box; padding: 20mm; }
実際には余白が必要ですから、border-boxを指定してpadding数値分だけ全体のサイズから差し引いて計算します。
改ページの設定
レイアウト枠のCSSには、幅と高さ以外に改ページ設定をします。
CSS
.page{ width: 210mm; height: 297mm; box-sizing: border-box; padding: 20mm; } .page{ page-break-after: always; }
page-break-after: always;は改ページを意味します。
これにより印刷レイアウト枠の終わりが、必ず改ページされる事になります。
最終ページは改行無し
これに続けて、最終のページは改行されない設定も同時に必要になります。
以下がそのプロパティ設定です。
CSS
.page:last-child{ page-break-after: auto; }
複数印刷される場合の最後のpageのCSSとして、last-childを入れています。
page-break-after: auto;が入る事で、最後は改ページがされない様になります。
これを入れないままだと最終ページでも改ページされ、空白のページが1枚印刷されてしまいます。
印刷ボタンの設置
上記で用意した印刷専用ページ上に「印刷ボタン」を用意します。
それがクリックされた時に「印刷ダイアログパネル」が表示されるのが望ましいと思います。
印刷ボタンのHTML
まずはボタンのHTMLソース例です。
aタグ
<a href="javascript:void(0)" onclick="window.print();return false;">印刷する</a>
buttonタグ
<form> <input type="button" value="このページを印刷する" onclick="window.print();"> </form>
いずれかの方法でボタンを表示させる事ができます。
ボタンのデザインはCSSで自由に変更して下さいね。
ボタン自体は印刷させない
印刷ボタンがページ上に設置してあると、印刷時にボタン自体も印刷されてしまいますよね。
ボタン自体が印刷される必要はありませんから、表示されない様にするべきでしょう。
これはCSSのprint時に非表示にして処理するのが簡単です。
CSSによる印刷非表示
ボタン自体、或いはボタンが設置してあるセクション（div）自体にno_printなどのクラス名を設置します。
HTMLソース
クラス名を付けたdivでaタグボタンを囲います。
<div class="no_print"> <a href="javascript:void(0)" onclick="window.print();return false;">印刷する</a> </div>
CSS
@media print{ .no_print{ display: none; } }
media printを設定する事により、印刷時にno_printのクラス名が付いたエリアは非表示になります。
印刷時のページタイトルや日付を表示させない
通常印刷ページ上部には、ページのタイトルや日付、フッター部分にはURLなどが表示されます。
先ほどのCSSでは、@pageのmarginを0mmにしているのでヘッダーやフッターは表示されないはずです。
しかし場合によってヘッダー・フッターのON・OFFができると便利な時もあるでしょう。
印刷ダイアログパネル上での設定
印刷ボタン或いは「Ctrl＋P」を押して、印刷ダイアログパネルを出しましょう。
使っているブラウザなどで違いがありますが、「その他の設定」或いは「詳細設定」の欄があります。
そこに「ヘッダー・フッター」の欄があり、チェックが付いているはずなのでチェックを消しましょう。
そうするとヘッダー・フッターが表示されなくなります。
自由にON・OFFの切り替えができる
このヘッダーフッターを消す操作は、PCブラウザごとにユーザーにおこなって頂く設定となります。
一旦チェックを外すと、常にヘッダーフッターは消えた状態になります。
元に戻す場合はチェックを付けましょう。
ヘッダー・フッターが不要なケース
ユーザーが単にA4印刷をするだけならば、ヘッダーフッターが付いていても問題は無いかも知れません。
しかしヘッダー・フッターが邪魔になる特殊なページもあります。
例えばクライアントがこのWEBページを「発注書」として使う場合などですね。
印刷したものをFAXしたりしますから、ヘッダー・フッター情報は邪魔になります。
専用ページであれば、@pageのmarginを0mmにしておく方が良いでしょう。
