はじめに

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

ここでは、そのときに使ったCSSの解説を行います。

ブラウザの初期スタイルを使うものから、表紙、奥付などもついたものまで作っています。

Firefoxの最新バージョンを使うことを想定しています。そのため、Firefoxが対応しているCSSに限られます。

Firefoxもバージョンを重ねるにつれ、CSSの対応具合がよくなりました。background-blend-modeプロパティや、CSS Variablesなど、実装されるものも増えています。

私自身、CSSはまだまだ勉強不足なので、無駄な点や妙な点があると思います。継承すると思ってたのにしないのでよくわからないまま指定を増やしたり。ご指摘あればよろしくお願いいたします。

構成

以後、ファイル名末尾の数字が01と02の二種類あります。

末尾が01
段落行頭で字下げをしていない。段落間を1行分空ける。
末尾が02
段落行頭で1文字字下げ。段落間は空けない。

「print_basic01.css」で、多くの要素にスタイルを指定しています。「print_book01.css」は「print_basic01.css」を読み込んだ上で、小冊子用に作ったクラス指定を継ぎ足しています。

このように、「print_basic01.css」を基本にして、左側を空けたり見出しにカウントを付けると言った指定を継ぎ足すように作っています。

全体のスタイル

basic

各要素にスタイルを指定しています。あっさりした感じにしてます。

  • print_basic01.css
  • print_basic02.css

フォントファミリー指定をまとめた「print_font.css」を読み込んだあと、各要素にスタイルを指定しています。

「print_basic02.css」は、「print_basic01.css」を読み込み、段落の表示指定を一部変更しています。

画像は段落行頭で字下げをしない、「print_basic01.css」を使った表示サンプルです。表紙は作られず、2番目のh2要素の手前から改ページされます。

book

冊子用のスタイルを追加したCSSです。

  • print_book01.css
  • print_book02.css

「print_basic01.css」に冊子用のスタイルを追加しています。表紙、目次、後書き、奥付、裏表紙、脚注などです。

「print_book02.css」は、「print_book01.css」を読み込み、段落の表示指定を一部変更しています。

画像は段落行頭で字下げをしない、「print_book01.css」を使った表示サンプルです。見出しも本文も左右いっぱいに書かれます。

book_left

本文の左側を少し空けるよう指定しています。

見出しの位置はh1~h3は変更せず、h4~h6も若干右に寄せているものの、本文よりは左に少し出るようにしています。本文と見出しとが区別しやすくなっていると思います。

  • print_book_left01.css
  • print_book_left02.css

両方とも「print_book0*.css」と、左開けの指定を書いた「left.css」を読ませています。

画像は段落行頭で字下げをしない、「print_book_left01.css」を使った表示サンプルです。

book_c

見出しにカウンタを付けてみました。章のh2、節のh3に自動で数字が付いていきます。

  • print_book_c01.css
  • print_book_c02.css

両方とも「print_book0*.css」を読み込み、h2とh3へのカウンタの指定を書いています。

数字が付く見出しはmain要素内のh2要素、h3要素です。main要素外の目次などには数字が付かないようにしています。

引用した箇所に見出しがあっても、そこにはカウンタは付かないようにしています。

画像は段落行頭で1字下げる、「print_book_c02.css」を使った表示サンプルです。h2とh3に数字が付いています。文字は、幅いっぱいに書かれます。

book_c_left

本文の左側を空けつつ、見出しにカウンタを付けています。「print_book_left0*.css」と「print_book_c0*.css」を足した感じです。

  • print_book_c_left01.css
  • print_book_c_left02.css

両方とも「print_book_c0*.css」と、左開けの指定を書いた「left.css」を読ませています。

個人的に使っているのは「print_book_c_left01.css」です。

画像は段落行頭で字下げをしない、「print_book_left01.css」を使った表示サンプルです。

他のCSS

webfont.css

2015年01月18日分から追加しました。フォントファミリー名の指定をまとめています。また、フォントの大きさを絶対単位で2箇所(body要素とmath要素以下の要素)指定しています。

ほかのCSSではフォントの大きさを相対指定で書いており、ここでのbody要素への指定がフォントの大きさの基本にしています。

フォントを、Webフォントの方法でローカルのフォルダから読み込むようにしています。デフォルトはCSSフォルダ下のfontフォルダ。無ければシステムにインストールされているフォントが読み出されるはずです。

print_basic01.cssが読み込みます。miniを除く他のCSSに影響を与えます。

font.css

webfont.cssと同じですが、システムにインストールしているフォントを読むようにしています。

print_basic01.cssに指定していますがコメントアウトしているため、無視されます。

etc.css

特殊なスタイルをまとめています。

print_book01.cssが読み込みます。mini、basicを除く他のCSSに影響を与えます。

left.css

左を少し空けて表示印刷するためのスタイルです。

左空き用のCSSで読み込むよう設定しています。

rightimage.css

画像を右側に配置するための指定です。

print_book01.cssにとりあえず書いていますが、コメントアウトしているのでデフォルトでは無視されます。

mini(番外編)

print_mini01.css
最低限の指定のみ

冊子風の印刷に関する最低限の指定しかしていないCSSです。段落や見出しなど、ほとんどの表示に指定がありません。ブラウザのデフォルトスタイルシートの表示になります。

h2要素の手前で改ページするよう指定しています。また、最初のh2要素の手前では改ページしません。その辺はCSS文書のコメントに書いています。

おまけ程度に作ったものでフォントファミリー等の設定もなく、このままでは実用性は無いと思います。

新しいプロパティ

今回、画像を左寄せして文章を右に回り込ませたりするのに、floatではなくフレキシブルボックスで指定してみました。理解するのが大変ですし、今も良く判ってませんが、理解できれば今までめんどくさかった一部の指定が楽にできるようになるかもと思ってます。

表紙の下に二段組みの文章を置いたり、裏表紙の真ん中に文字を配置するのにも使っています。以前はpositionを使いましたが、表紙や裏表紙の後に時々空白ページが出たりして困ってたのでした。フレキシブルボックスを使ってその辺が解消しています。