組版見本 ― 報告書
HTML と CSS だけで、段組み・脚注・柱まで決める
図 1 原稿から頁ができるまで。段をまたぐ図は column-span で置く
ウェブの文書は、読む人の画面の幅に合わせて流れます。どこで行が折れ、どこで頁が変わるかは、書いた人には決められません。紙に刷る文書や、配って読んでもらう資料では、これが困ります。表が頁の境目で割れたり、見出しだけが頁の最後に取り残されたりするからです。
組版エンジンは、同じ HTML を決まった大きさの頁に割り付けます。行の長さ、段の数、余白、頁の頭と足に入れるものを先に決めておき、原稿をその枠に流し込みますCSS の規格では「CSS Paged Media」と呼ばれる部分。頁の大きさや余白を @page で書く。。
頁の上には柱を、下にはノンブルを置きます。この頁では、柱に文書の題と節の名前を入れています。節が変わると、次の頁から柱の文字も変わります。脚注は本文の中に書いておけば、注を付けた行と同じ頁の下へ送られます。
見出しのすぐ後で頁が変わらないこと、段落の最初や最後の一行だけが別の頁へ離れないことも、規則として書けますwidows と orphans の指定。見出しには break-after: avoid を付ける。。どれも、原稿を直して組み直すたびに同じように効きます。
| 決めること | CSS の書き方 |
|---|---|
| 頁の大きさと余白 | @page { size; margin } |
| 柱とノンブル | string-set、counter(page) |
| 段組み・段抜き | column-count、column-span |
| 脚注 | float: footnote |
| 目次の頁番号 | target-counter() |
表 1 この見本で使った指定
原稿と体裁を分けておくと、同じ原稿を別の判型で組めます。A4 の報告書を、そのまま A5 の冊子や画面で読む版に組み直せます。体裁の指定は一度書けば使い回せるので、二冊目からは原稿を書くだけで済みます。
原稿は人が書いても、手元のファイルから作っても、AI に書かせてもかまいません。組版の規則が同じなら、できあがる頁の質は変わりません。
目次の頁番号や「表 1 を見よ」の参照は、組み上がった頁から数えて入ります。PDF のしおりも見出しから作られます。