はじめに

時々、プリンタの冊子印刷機能を使って小冊子を作ることがあります。HTMLで書き、印刷用のCSSでレイアウトなどを指定し、ウェブブラウザ（以下ブラウザ）で表示したものを印刷用のデータとして使います。

作成の過程と、使っている印刷用CSSなどのデータを公開してみます。

CSSファイルやサンプルのHTMLファイル、画像などは、このページのダウンロードから入手できます。

CSScombのユーザ設定ファイルは、CSSの整形について：ダウンロードで公開しています。

作成について

前提

HTML5とCSS3の組み合わせで印刷用のデータを作っています。

ブラウザ
最新のFirefox
IEやGoogleChromeを使う場合はCSSを改造
プリンタ
両面印刷機能付き
プリンタドライバ
冊子印刷（中綴じ印刷）機能付き

両面印刷機能の無いプリンタ、冊子印刷機能の無いプリンタドライバだと、ちょっと難しい気がします。

きっかけ

OSやソフトウェアのインストールといったPC関係の作業では、印刷物の手順書が手元にあると便利です。引っ越しするときは、引っ越し前後で行う手続きや新住所などをまとめた紙があると便利です。

印刷物を作るならMS Wordといったワープロソフトの出番です。DTPソフトを使う手もあります。ただ私はワープロが苦手で、テキストエディタでHTML文書作ってる方が楽なのでした。見た目などを指定するCSSは作るのが大変ですが、一度完成すれば使い回しが効きます。

ということで、自分用の印刷物をHTML+CSSで作っていました。CSSは自分のサイトで使っているモニタ用のを手直しし、ウェブブラウザで表示してA4の紙に印刷。

その後、プリンタドライバにあった冊子印刷機能を使い、A5サイズの冊子を作るようになりました。コンパクトで読みやすく、便利に使っています。

Wordを含めたMicrosoft Officeの操作が、社会人としての（ほぼ）必須条件になっている現在、このような話はまったく無意味かもしれません。もしくはPDF文書を作ってAdobe Readerなどで印刷する方が適しているかもしれません。とりあえずこんな方法で個人用の小冊子を作ってる人間もいるよということで。

この方法は、ガレージキットの組立説明書製作にも使っています。最初に作ったのは2006年、OpenOffice.orgのワープロを使ったものでしたが、大変でした。2010年からHTML+CSSで作りましたが、ウェブブラウザの印刷用CSSへの対応が弱く、調整に苦労しました。その後ブラウザの対応がかなり良くなってきたので、以前よりは楽に作れます。といっても事情が重なって、2012年以降ガレージキット原型を作っていないのですが。

ダウンロード

使用に当たって制限はありません。改造などもご自由にどうぞ。

オリジナルのアーカイブファイルの再配布はお断りします。

小冊子作成用ファイルセット
bookletfile_20150118.zip
CSSファイル＋サンプル用HTMLファイル関連：ZIP形式：162KB
MD5：1eefe7cb64b4172281ee15b3c40d8a6e
印刷範囲検討用画像ファイルセット
squaretemplate800x1200.zip
サンプル用HTMLに使っている印刷範囲検討用のレイヤー画像ファイル：ZIP形式：94KB
MD5：6af62125718a34c6bdb3e2f605c33ecd

小冊子作成用ファイルセットの内容

小冊子作成用ファイルセットの内容は以下の通りです。

印刷範囲検討用画像ファイルセットの内容

印刷範囲検討用画像ファイルセットの内容は以下の通りです。

PSD形式のファイルは、Photoshop Elements 9で作成したものです。Gimp2.8.14及びPaint.NET4.0.5＋PSD FileType Plugin2.4.1で開くことを確認しています。

PDN形式のファイルは、Paint.NET4.0.5で保存したものです。

PNG形式のファイルは普通の1枚画像ですが入れてます。どんなのか判るよう画像にリンクしておきます。

更新履歴

2015-01-18
フォントをWebフォントの形で読み込む方法をデフォルトにした
  • webfont.cssを追加
  • print_basic01.cssを変更、フォントの指定をfont.cssからwebfont.cssにした
2015-01-17
print_basic01.cssを更新
  • 初期化でユニバーサルセレクタのルールに書いた「font-weight: normal;」をbodyのルールに移動
    • 見出しに別の要素をマークアップすると文字の太さが標準になったりするので
    • 継承を考えるとこちらの方が良さそうなので応急措置
  • 空白ページのルールでセレクタ名を「section.null」から「.null」へ
    • 汎用性を考えてクラス名のみに変更
    • あまり多用していいようなルールでは無いと思いますが一応改訂
  • th、strong、h2～h6のルールに「font-weight: normal;」を追加
    • 初期化のルール変更による調整
※今回の更新で表示と印刷に変更はないはずです、たぶん……
2015-01-15
とりあえず公開

旧版

旧版はアーカイブファイル名の末尾に「_old」を付記しています。

小冊子作成用ファイルセット：2015年01月17日版
bookletfile_20150117_old.zip
CSSファイル＋サンプル用HTMLファイル関連：ZIP形式
MD5：7eca0607156338bccf0f0888b5fc0038
小冊子作成用ファイルセット：2015年01月15日初公開版
bookletfile_20150115_old.zip
CSSファイル＋サンプル用HTMLファイル関連：ZIP形式
MD5：4e340e45a29498c0f0d8e6dca89fe1be

印刷用CSSの文法検証

小冊子印刷用に作ったCSS文書は、W3C CSS 検証サービスの直接入力で検証しています。

以下の点でエラーが出ますが、これらについては無視することにします。

中の数値を変更して表示を確認してみましたが、問題なく適用されているように思いました。とりあえずこのままとします。

サンプルの小冊子印刷用HTMLの文法検証

小冊子印刷用に作ったHTML文書は、The W3C Markup Validation Serviceの直接入力で検証しています。

以下の点でエラーと警告（warning）が出ますが、これらも無視することにします。

rb要素関連のエラー

rb要素関連でエラーがでますが、試しにHTML5仕様書の例文をコピーしてバリデータにかけたところ、同じくエラーが出ました。

rb要素は一時削除され、復活した経緯があるので、その辺が関係してるんでしょうか。なんにせよ仕様書例文でエラーが出るのはおかしいので、ルビ関連のエラーは無視します。

というか仕様書例文のrb要素を使ったマークアップの方法がどうもよく判らないのでした。

<ruby>法<rb>華<rb>経<rt>ほ<rt>け<rt>きょう</ruby>

「法」がrb要素としてマークアップされてないように見えます。暗黙的にrb要素だって事になるのでしょうか？

このやり方だとFirefoxのHTML Ruby 7.2.0-beta1では表示が崩れます。8.0.0-beta11では大丈夫でしたが、印刷プレビュー＆印刷ができないので今回は使えません。

とりあえず、rb要素とrt要素はペアでマークアップした方が良さそうですが、私の勉強不足により根本的に勘違いしている可能性が十分あるので、その辺何とも。

Unicode関連のエラー

文字関係は、言語別フォント表示テストで書いている「羽」の文字で引っかかるようです。エラーの内容はText run is not in Unicode Normalization Form C.でした。エラーの意味は「Text run is not in Unicode Normalization Form C.」というHTML Validation Serviceの警告について: 小粋空間に解説がありました。

とはいえどうすればいいか判らなかったので、「羽」の字はそのままにします。

後書き

今見ると、ボーダー、特に見出しの下線がうるさいかもと思うようになってきました。下線やめてmargin増やすべきだろうかとかいろいろ思ってたりします。

何か書くこと忘れているような気もするし、修正かけたいところもありますが、いつまでたっても終わらないので、とりあえず公開してから考えることにします。