HTMLとCSSで印刷させる頁を作る

キッザニア東京のお仕事パビリオン紹介やキッザニア東京のお仕事募集スケジュールの頁を、読んでくれる人に役立ててもらうために、簡単に印刷できるようにしようと考えました。

お仕事パビリオン紹介や、お仕事以外のパビリオン紹介の頁は、印刷して現地に持参してもらって役に立つ頁にしようと努力してきたからです。

そこで、具体的にどうすればいいか、調べて勉強することにしました。

まず、印刷ボタンを作る。

そりゃー、ブラウザの印刷を押せば誰だって(プリンターがあれば)印刷できるのは判ってますが、印刷命令専用の印刷ボタンがあれば、まず「そうか!　印刷するともっと便利なんだな」と気づいてもらえると思ったからです。

1.印刷ボタンの作り方

HTMLの記述の任意の箇所に、

<input type="button" value="このページを印刷する【全○頁】" onclick="window.print();" />

というのを入れる。

もちろん、value="　"の中は、ボタンに表示させる好きな言葉を入れることができます。

ページ数も入れたのは、紙の準備とか心の準備とかあるので、先に教えて上げた方がいいんじゃないかなーと思ったから。

2.印刷専用のCSSを作る

通常は外部スタイルシートを使うとき、HEADの中に

<LINK rel="STYLESHEET" href="なんちゃら.css" type="text/css">

と、入れると思います。

これを、

<LINK rel="STYLESHEET" href="なんちゃら.css" type="text/css" media="all">
<LINK rel="STYLESHEET" href="印刷用.css" type="text/css" media="print">

と、変えます。なんちゃら.cssは、画面表示用で、印刷用.cssは印刷用に作ります。二行にするだけじゃなくて、 media="all"とかを入れるのを忘れないように。

順番は、上がallで、下がprintです。

で、あとはそれに合わせて印刷用.cssを作ればいいわけです。

印刷用.cssのポイント。

文字サイズはpxで指定して、A4で印刷したときに綺麗に収まるよう工夫する。

いらない箇所はcss側で

.aaa {
       display:none;
}

こんな風に書いておきます。で、HTML側では<DIV class="aaa">と</DIV>で、消したい箇所を囲っておけばOK。私の場合は、ナビゲーションのヘッダーやフッター、印刷ボタン、広告などをこれで消しました。

この他、横サイズを指定した部分などあったらはみ出さないよう、印刷.cssでは調節しておきましょう。

あっ、印刷用.cssが巧く行っているかどうか確かめるのにいちいち印刷してみる必要はありません。

FTPしてブラウザの印刷プレビュー見てみれば、どんな風に印刷されるのか確かめることができますとも。

3.印刷用の改行を調節する

これで最後です。

印刷したときに、文章や表などが希望しない場所で切れてしまうことがあります。

そこで強制的に印刷用改行を先に指定しておきます。もちろんディスプレイでは見えません。

印刷用.cssには、

.break {
        page-break-before: always;
}

を記述します。

そしてHTML側では改行したい2頁目以降をそれぞれ<DIV class="break">と</DIV>で囲っておきます。

これは囲ったブロックが前の記述とは違う頁で印刷せよという命令ですから、最初の1頁目は囲わなくて大丈夫です。

2頁目、3頁目・・・以降の頁はそれぞれ1頁以内に収めたい分ずつ、囲ってやりましょう。

これで印刷用頁のできあがりです。どう?　うまくできた?　良かったらキッザニア東京に行くときに印刷してみてね。きっと役に立つと思うよ。