CSSでここまでできるとは驚いた！ CSSを活用した本作りのワークフローを徹底解説した良書 -CSS組版Vivliostyle入門

Book Review

Post on:2023年7月14日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は『CSSによる本作り』の解説書を紹介します。

原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。

表紙に「未知の表現力！」とあるように、CSSでこんなこともできるのかと驚きの連続でした。

本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。

マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。

Web技術で「本」が作れる CSS組版Vivliostyle入門
ISBN 978-4-86354-418-5
[Amazonでみる]
[楽天でみる]

著者: リブロワークス
監修: Vivliostyle
出版社: C&R研究所
発売日: 2023/5/12

Kindle版も同時発売されています！

CSS組版Vivliostyle入門 Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

「CSS組版ってどんなもの？」そこから疑問が湧いてくると思います。CSS組版とは、CSSやHTMLなどを使用して印刷物の版下を作成するものです。従来のDTPのワークフローとは大きく変わり、CSSなどのWebの知識が必要となります。とは言っても当ブログのビジターであれば本書を読むだけでできると思います。

もう一つ大事なポイントがあります。それがCSS組版用ソフトウェアの「Vivliostyle」です。オープンソースなので無料で利用でき、本書がそれで作成されたように日本語もサポートされています。Vivliostyleを簡単に説明すると、HTMLファイルを作成、CSSで組版して、PDFに書き出します。

Vivliostyleはブラウザ（Chromium）で動作するため、WindowsでもmacOSでも動作します。本書ではVivliostyleの導入手順なども解説されています。

本書は7章構成で、第1章はCSS組版の基礎知識と準備、第2章からさっそくCSSによる組版をはじめます。

原稿はHTMLで作成します（後ほど、マークダウンに）。ぱっと見、普通のHTMLだと思います。htmlがあり、headがあり、bodyもあります。見出し要素やp, div、さらに画像を配置するfigureもありますね。

CSSも特別なものを使用しているわけではありません。box-sizing: border-box;にして、普通にWebページを実装するのとあまり変わりません。ただ比較的新しめのモダンCSSが使用されています。たとえば、marginはmargin-leftではなく、論理プロパティ（margin-inline-start）が使用されています。

参考: CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど

もちろん、本や印刷物用のCSSも使用します。Webページでは改ページ用のプロパティ（break-beforeなど）はあまり使用していないと思いますが、見出しの前に改ページしたり、画像を版面に収めたり、書籍ならではのものがあります。

第3章はマークダウンでの原稿作成。HTMLで原稿を書くのは、HTMLに慣れている人でも面倒なものです。そこでマークダウンで原稿を作成し、マークダウンからHTMLを生成するツール（VFM）を使用します。

また、ページ数が多い本を作成する場合は、原稿ファイルを分割して、最後にそれらを連結すると効率的にできます。

第5章は、組版でよく使用されるものをCSSで実装するテクニックです。袋文字や丸付き数字をはじめ、画像や表組み、コード表示、縦書き、さらにはWebページ特に日本語サイトではあまり使用されないcolumnによる段組みなど、詳しく解説されています。

入れ子の見出し番号を自動で与えたり、ぶら下がりや行取りなんかもCSSで実装できます。また、レイアウトにはFlexboxやCSS Gridなんかも使用して高度なレイアウトを実装できます。

第6章は、いよいよ仕上げ。印刷所に入稿するための版下データを作成します。

最後の第7章は、オンラインの書籍制作サービスの紹介。Vivliostyle Pub（2023年現在アルファ版）を使用すると、HTMLやCSSやマークダウンを編集するエディタさえもなし、ブラウザ上で執筆からすべてが完了します。

CSS組版Vivliostyle入門の目次

CSSはWebサイトやスマホアプリだけでなく、スタイルを紙の印刷にも適用できることは知っていましたが、まさかここまでできるとは知りませんでした。普通のHTML、もしくはマークダウンの原稿を元にオンライン書籍も製本にもできます。一般の人が出版するとなるとかなり大変な道のりですが、これなら元手もそれほどかからずに挑戦できそうです。