はじめに

HTMLとCSSで印刷用のデータを作り、ウェブブラウザと両面印刷機能付きのプリンタを使って、小冊子を作りました。

ここでは、そのときの作成の過程を書いてみます。

順序

  1. 印刷するHTML文書を作成
  2. 印刷用CSSを用意
  3. HTML文書とCSSをウェブブラウザに読ませ、印刷用のデータを作成
  4. プリンタドライバの設定
  5. プリンタで印刷
  6. 製本

ワープロソフトやDTPソフトが行なうところを、HTML文書、CSS、ブラウザ、プリンタドライバの機能に割り振ります。

HTML文書を書く

HTMLの種類

私はHTML5で書いてます。CSSもHTML5で書くことを前提にして作っています。

画像は私が普段使っているWZ Editor 8で編集中のHTML文書です。背景色などいろいろカスタマイズしています。

アンカーの書き方

アンカーの箇所を印刷すると、普通は青色になり下線が引かれますが、URLはわかりません。

CSSを使って、URLを書いているhref属性を表示できます。「リンク先(http://example.jp/index.html)」といった感じです。この場合、URLが長かったり、一つの文にアンカーが何カ所もあると、文章が読みづらくなります。

URLは最後に脚注の形でまとめて書いた方がわかりやすいかもしれません。JavaScriptを使ってまとめる方法があるようですが、うまくいきませんでした。知識のある方は試してみるといいかも。

HTML Book

本を執筆するための規格「HTML Book」というのがあります。日本語の仕様書もあります。これを書いている時点では2014年4月8日が最終更新のようです。

以下の点が気になったので、私はHTML Bookの書き方は使いませんでした。ただ、クラス属性の名前など、一部の仕様を取り入れています。

章や節などいくつかの階層の見出しがh1要素となり、それより下位がh2以降になるようです。h1要素が複数+h2以下になりますね。HTML5含む今までのHTMLでの使い方と違う点が気になりました。もちろん文法違反ではないし、そういう使い方も有りだと思いますが。この辺気にならなければHTMLBookで書いてもいいかもしれません。

古い書き方

表示媒体が特定の大きさを持った紙になります。そのため、昔流行ったテーブルレイアウトで、各要素の幅と高さをピクセルで指定し、完全に固定したレイアウトで作ることもできます。

しかし、テーブルレイアウトのHTML文書(ソース)は読みづらいです。文書構造が判りにくく、追記や手直しが大変になります。

レイアウト等の見た目はCSSに任せれば、ブラウザではなくテキストエディタで表示した状態でも読みやすいものができます。

CSSの表現やブラウザの実装もよくなってきたので、今更テーブルレイアウトで作る必要は無いと思います。それが非公開で印刷専用のHTML文書だったとしても。

印刷用CSSを用意

  • 背景色は白、文字は黒が基本
  • 余白はほどほどに空ける
  • フォントの大きさは読みすいものを
  • 本文は明朝体(セリフ体)、見出しはゴシック体(サンセリフ体)が基本
  • コードやURL、メールアドレスなどは等幅フォントがいいかも
  • 装飾はできるだけシンプルな方が良さそう
  • 白黒でもいいけど、赤緑青の使用も考える
  • 章単位でページを変えるといいかも
  • 妥協も必要

配色

全体の背景色は白(background-color:#fff)が基本だろうと思います。全体に背景色を付けたい場合は、その色の紙を用意した方が良いかも。

本文の文字は黒(color:#000)が基本だろうと思います。色は薄めより真っ黒の方が読みやすいです。インク代を気にする場合はこの限りではありませんが、実際どの程度効果があるモノなんでしょうか。

モノクロプリンタの場合、赤、青、緑などの部分は適切な濃度のグレーに変換してくれると思うので、色の指定はあまり気にしないでいいかもしれません。ただ、赤や青で区別した箇所が似たような灰色になって区別しにくくなる場合があります。ボーダーならスタイルを点線や二重線に変更するなどして区別出来るようにした方がよさそうです。

余白

見出しやリストなどと次の要素(他のリストや段落など)との間は、いくらか間を空けた方が読みやすくなると思います。

どの程度空けるかは難しいところです。詰めると紙の消費は少なくなりますが、読みづらくなります。空けすぎるとページ数が増え、紙の消費が多くなります。

この辺はCSSにおけるmarginと継承の関係も勉強した方が絶対にいいのですが、かなりややこしいです。ブラウザの表示を見ながら調整するだけだと、途中で「なぜ思った通りにならない?!」と頭を抱える事になります。面倒くさがって手抜きすると余計泥沼にはまるという。

というところですが結局私は適当なところで妥協してます。

改ページ

ブラウザでの表示と紙媒体で異なるのが「ページ」という考え方です。

HTMLファイル一つを「ページ」「ウェブページ」と呼んだりしますが、あくまでも便宜上の話。紙と違い、内容が多いと下へ(あるいは左へ)巻物のように途切れることなく伸びていきます。環境によっては表示領域を縦横広げることもできるし、縮尺も自在に変化させられます。

紙は片面が1ページで、縦横の大きさが固定しています。文章や図が1ページ内いっぱいになると一旦そこで途切れ、続きは次のページに移ります。

どこでページが改まるかは、ブラウザやプリンタドライバが自動でやってくれます。ただ、特定の要素などの手前、途中、末尾で改ページすると指定することもできます。

できれば章と章の間など、内容が変わるところでも改ページした方が、読みやすい冊子ができると思います。

HTML4.01やXHTMLの場合

たとえば、h1の見出しが全体を表し、h2が章の、h3が節の、h4が項の見出しを表すと考えてみます。このとき、h2要素の手前で改ページする(その前の章の末尾で改ページすることになる)よう設定するといいかもしれません。

HTML5の場合

章や節、項などのまとまりを表すためのsection要素というのがあります。このとき、各section要素の末尾で改ページするよう設定するといいかもしれません。章を表すには、適当なクラス属性やカスタムデータ属性をつけ(<section data-type="chapter">等)、それらにCSSで改ページを指定してやります。

改ページしたくない箇所

逆に、特定の要素などの手前、途中、末尾で改ページしないという指定もできます。

画像や表が2ページにまたがって印刷される事があるかもしれません。見開きのページにまたがるなら構わないかもしれませんが、紙をめくって次のページにまたがるようだと読みにくくなります。巨大とか非常に縦長の画像や表でどうしようもないならともかく、できれば避けたいところです。こういうときも画像や表では改ページされないとか、その手前で強制的に改ページさせるとか、適切に指定してやります。

ただ、この辺の指定が必ずうまくいくとは限らなかったりするのが難しいです。

受け持つ範囲

@page規則で、見開き時の左ページ、右ページへの指定というのもできるのですが、Firefoxは未対応です。

ページ番号やページ上部のヘッダ、下部のフッタの内容を、左ページなら左寄せ、右ページなら右寄せという表示もできそうな気がするのですが、未対応ならしょうが無い。というか冊子印刷でもちゃんと適用されるのかなという心配もあります。

ということで、ページ番号やヘッダ、フッタの類いは、Firefoxの印刷設定に任せることにします。ついでに1ページの余白も任せます。

ブラウザで表示

設定のチェック

HTML文書を書き、CSSが用意できたら、ブラウザで表示します。

このとき、ブラウザの設定によってはCSSの指定が効かない場合があります。Firefoxの場合、[ツール]→[オプション]→[コンテンツ]の[詳細設定]→[フォント]で、最小フォントサイズを「なし」、Webページが指定したフォントを優先するにチェックを入れておきます。デフォルトはこの状態だったかもしれません。

普段Firefoxを使っている場合は、印刷専用のFirefoxを作った方が便利だと思います。私は印刷専用のプロファイルを作り、複数同時起動できるオプションで起動するようにしています。

印刷プレビューと印刷の設定

ざっと確認した後、印刷プレビュー画面にして、ページ設定を行います。Altキーを押してメニューバーをだし、[ファイル]→[ページ設定]でもできます。ここで印刷の倍率関係や周囲の余白、ヘッダやフッタの設定を行います。

続いてプレビュー画面とページ数の確認。冊子印刷の場合、ページ数は4の倍数が望ましいです。そうで無い場合は、最後に空白のページができます。それで良ければ気にしないでいいと思いますが、奥付や裏表紙などを設定している場合は、ページ数の調整を行います。

一つの内容がページ間をまたぐとき、見開きになる場合は普通に読めると思いますが、ページをめくって次のページにいくようだと、読みやすさが若干損なわれます。必要なら目的の箇所を見開きにするため、直前に空白のページを挿入するなどの調整を行います。

ページ数の調整は、HTML文書の改変が基本になるだろうと思います。空白のページを挿入するとか、必要の無い行を削除するとか。それ以外だと、全体の縮尺を変更する方法があります。縮尺を小さくすれば多くの内容を1ページに詰め込めますが、その分文字などが小さくなって可読性が損なわれます。

プリンタドライバの設定

ブラウザで印刷のボタンを押すと、一旦プリンタドライバの確認画面が出ると思います。プロパティを表示し、冊子印刷を行うよう設定します。

印刷品質は、標準や最高品質などいろいろ試し、見当を付けておくといいかも。私の持っているIP4100だと、「きれい」と「標準」では印刷時間が倍も違います。ただ、「標準」だと枠線の色の濃さにムラが出たり若干波打ったりするので、基本的には「きれい」で印刷しています。インク消費を抑えるときは「速い」を選択するといいらしいですが、確認したことがないので良く判りません。

プリンタで印刷

全て準備が終わったら印刷を実行します。私の環境だと内容にもよりますが、5枚20ページの印刷で「きれい」が約20分、「標準」が約10分かかります。「きれい」で1ページ1分というところです。

レーザープリンタだともっと早いんでしょうか。

製本

印刷が終わったら製本です。紙を揃えて二つに折り、ホッチキスで留めます。中綴じできるホッチキスや、治具があると便利です。というか無いとキツいかも。

両面対応用紙SW-201だと、20ページ5枚くらいならホッチキス「ホッチくる HD-10V」で余裕で留められます。28ページの7枚くらいだと、厚くて失敗するときがありました。

ホッチキスの針は100均でも売っていますが、ホームセンター等で売っているマックスの針を使うのがベストだと思います。

紙を二つに折るとき、親指の腹にセロテープでクリップを留め、ここで折り目を付けるといいそうです。この辺のノウハウは同人誌のコピー本を作っている方の話が参考になります。

表紙にページ番号を書かない方法

ページ番号はプリンタドライバの機能で付けています。私が使っているプリンタドライバの場合、ページ番号を書く場所は上下の左右真ん中と選べますが、特定のページだけページ番号を書かないという指定はできません。

その結果、表紙にもページ番号が書かれます。その辺気になる人がいるかもしれません。

表紙にページ番号を書かないようにするには、表紙の紙だけ別に印刷する方法があります。

  1. 3ページから最終ページ-2ページまで印刷(20ページの冊子なら3~18ページまで)
  2. HTMLファイルをコピーして、表紙用のHTMLファイルを作る
  3. 1,2ページと最終ページ、その手前のページ以外の内容を削除する
  4. 表紙用のHTMLファイルを印刷、ページ番号はふらないように指定
  5. 印刷された紙を重ね、製本して完成

印刷するページ範囲の指定はプリンタドライバ、ページ番号の指定はFirefoxの印刷プレビューにあるページ設定[余白とヘッダ/フッタ]から行います。

とかなんとか書いたものの、余り気にしないのでやったことがありません。うまくいくのでしょうか。いかなかったらいくように工夫するだけなのですが。

その後の保守作業

これで冊子が完成しましたが、実際に使ってみると訂正が必要な箇所に気づいたりします。内容が間違っているとか、加筆した方がいい箇所とか、順番を変えた方がいい箇所とか。

冊子にメモを書くなど、とりあえず記録をとっておきます。そしてHTML文書を改訂します。訂正の日付と内容などをコメント形式で付け加えておくと、後で見返したときに便利です。

改訂を繰り返すことで、文書がさらに有用になっていきます。HTML文書はただのテキストファイルなので、修正も楽です。

気づいたこと

Firefox

Firefoxの古いバージョン(Firefox30)だと、リロードするとルビが左右にずれるなどの不具合が出るときがありました。Firefox31以降は問題ありません。ルビのアドオンはバージョン 7.2.0-beta1を使った時の話です。

こういうこともありますし、セキュリティの問題もあるので、Firefoxに限らずブラウザは最新版をおすすめします。

まあ、バージョンが新しくなったらおかしくなった、ということもあるのですが。

フォントの文字化け

特定のフォントが印刷時のみ文字化けすることがありました。ブラウザの表示や印刷プレビューでは表示されるのに、印刷すると豆腐(□)になってしまうという。しかも化けるのは漢字と記号だけで、数字とひらがなは普通に印刷されます。

対処として、Windwsのフォントキャッシュを削除し、再起動すると直りました。印刷だけおかしくなるってのがあるとは。

フォントキャッシュ削除はマイクロソフトのサイト(Windows7 SP1)を参考にしました。

  1. 管理者としてコマンドプロンプトを起動
  2. del %windir%\system32\FNTCACHE.DATを入力、実行
  3. PCを再起動し、確認

再起動でフォントキャッシュが再構築されます。