はじめに
時々、プリンタの冊子印刷機能を使って小冊子を作ることがあります。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
小冊子作成用ファイルセットの内容
小冊子作成用ファイルセットの内容は以下の通りです。
- [image](フォルダ)
- 方眼紙800x1200文字付き.png
- 方眼紙800x600文字付き.png
- 方眼紙640x480文字付き.png
- 方眼紙400x300文字付き.png
- 方眼紙320x240文字付き.png
- 方眼紙300x200文字付き.png
- [css](フォルダ)
- print_book_c_left02.css
- print_book_c_left01.css
- print_book_c02.css
- print_book_c01.css
- print_book_left02.css
- print_book_left01.css
- print_book02.css
- print_book01.css
- rightimage.css
- left.css
- etc.css
- webfont.css
- font.css
- print_basic02.css
- print_basic01.css
- print_mini01.css
- 印刷用CSS.txt
- [font](フォルダ)
- フォントの種類.txt
- サンプル004_引っ越し前の手続き.html
- サンプル003_引っ越し前の手続き.html
- サンプル002_引っ越し前の手続き.html
- サンプル001_引っ越し前の手続き.txt
- サンプル104_OS再インストール.html
- サンプル103_OS再インストール.html
- サンプル102_OS再インストール.html
- サンプル101_OS再インストール.txt
- sample_l_book.html
- sample_m_book.html
- sample_s_book.html
- sample_m_basic.html
- sample_s_basic.html
- readme.txt
印刷範囲検討用画像ファイルセットの内容
印刷範囲検討用画像ファイルセットの内容は以下の通りです。
- squaretemplate800x1200.psd(フォトショップ形式)
- squaretemplate800x1200.pdn(Paint.NET形式)
- squaretemplate800x1200.png(png形式の1枚画像)
- image_readme.txt
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;」を追加
- 初期化のルール変更による調整
- 初期化でユニバーサルセレクタのルールに書いた「font-weight: normal;」をbodyのルールに移動
- ※今回の更新で表示と印刷に変更はないはずです、たぶん……
- 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 検証サービスの直接入力で検証しています。
以下の点でエラーが出ますが、これらについては無視することにします。
- print_book01.cssで、CSS variablesを使った箇所
- etc.cssで、calc() 関数を使った箇所
中の数値を変更して表示を確認してみましたが、問題なく適用されているように思いました。とりあえずこのままとします。
サンプルの小冊子印刷用HTMLの文法検証
小冊子印刷用に作ったHTML文書は、The W3C Markup Validation Serviceの直接入力で検証しています。
以下の点でエラーと警告(warning)が出ますが、これらも無視することにします。
- ルビのマークアップでrb要素がルビの子として許可されない等のエラー
- 文字でUnicode正規化形式関連の警告
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増やすべきだろうかとかいろいろ思ってたりします。
何か書くこと忘れているような気もするし、修正かけたいところもありますが、いつまでたっても終わらないので、とりあえず公開してから考えることにします。