A4サイズ印刷専用WEBページを作る方法について

A4サイズ印刷専用WEBページを作る方法について

A4サイズ印刷専用WEBページを作る方法について

WEBページをA4サイズで印刷できるようにする場合、様々な設定が必要になります。

A4で連続して印刷される場合と、A4用紙1枚で収まるケースとでCSSが変わってきます。

印刷ボタンを非表示にしたり、ヘッダー・フッターを非表示にする設定も忘れずにおこないましょう。

任意に印刷向けWEBページを作る

任意に印刷向けWEBページを作る

本記事はA4印刷向けのWEBページを作る大まかな手順です。

印刷を前提としたページを前もって準備するタイプですね。

印刷を前提としていないWEBページをユーザーが印刷する場合、ある程度ユーザー任せで構わないと思います。

元々印刷向けに作っていない事を唄っておけば、多少レイアウトが変でも文句は言われないはずです。

あえて印刷ボタンを準備するケース

しかしあえて印刷専用ページとして公開する場合は、きちんとした整備が必要になります。

まず内容はA4判サイズに収まるコンテンツを準備するようにしましょう。

印刷専用ページを用意し、かつ印刷ボタンを準備して、印刷ダイアログのパネルが表示されるまでを紹介します。

WEBページのレイアウト

A4の縦横サイズ

一般的な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にしておく方が良いでしょう。

この記事をシェアする

一押し人気コーナー紹介

CSS関連記事