第1章を無料で公開します！
CSS組版のワークフローを体験しよう！
2023/5/12に当社の著書、『Web技術で「本」が作れる CSS組版Vivliostyle入門』（シーアンドアール研究所）を刊行します。これまでにリブロワークスが積み重ねたCSS組版の現時点でのノウハウをまとめた、エポックメイキングな書籍です。
今回の発行を記念して、前書きから第1章まで、約30ページを公開します。フォントなど一部の見た目を変更していますが、内容は書籍とまったく同一、Vivliostyleで作成したデータそのものです。
第1章の1節では、本書の執筆から入稿までの流れを、時系列のドキュメント形式で紹介しています。CSS組版での本作りがどんなものなのかを、追体験できる内容です。
技術同人誌を作る方へ ～背景画像とフォントだけで印象は変わる
本書のターゲットの1つは技術同人誌です。技術同人誌は、カバーは凝っているのに、中のデザインはシンプルだな……と感じることも少なくありません。CSS組版であれば、フォントはWebブラウザで表示できるものなら何でも使えますし、すべてのHTML要素に背景画像を設定できるので、それらをひと工夫するだけでイメージをガラッと変えられます。
社内デザイナーの手が空いていなかったので、フリー素材とパワポを駆使してカラフルなサンプルを作ってみたのですが、CSS自体の背景指定自体は簡単なものの、紙面に合った画像を作るのはなかなか難しいですね……。デザインのセンスと、自在に画像を作る技術が必要と感じました。CSS組版向けのデザインの需要はあるかもしれません。
出版社、編集者の方へ ～コードと数式に強く、修正にも強い
リブロワークスはIT書籍の編集プロダクションなので、CSS組版を書店売りのIT書籍で使うことも考えています。IT書籍におけるCSS組版の強みは、コードと数式の組版ができることです。特に数式は、DTPソフトのInDesignに数式作成機能がないこともあって、CSS組版に取り組む強い動機となります。
また、修正に強いのも大きな強みです。本書は、初校後にサンプルファイルのCSSの指定方法を「論理プロパティ」を使った形に修正しています。これは全サンプルに影響する変更で、InDesignを使ったDTPであれば組版事故待ったなしレベルの修正です。しかし、CSS組版では原稿のMarkdownファイルを修正するだけでいいので、さほどの時間も掛かからずに修正完了しました。
次の画像は、通常のDTP工程で修正した場合を想定して、手書きの赤字を入れてみたものです。ここまで直すのであれば、普通なら組み直したほうが早いでしょう。組み直しですから、作業工数は約2倍になります。
CSS組版ですべての修正が楽になるわけではありませんが、著者または編集者自身が原稿データを修正するという条件を満たせば、コードや数式の修正が楽になることは確実です。
組版・デザイン経験者の方へ ～組版の考え方が予想以上に活かせる
使い方次第の面もあるのですが、CSS組版では組版やエディトリアルデザインの考え方がそのまま活かせます。普段組版するときは、頭の中で「本文は何Qで行送りが何H送り、天地ノド小口が各何ミリ、見出しのアキが何ミリで……」と設計してからDTPソフトで作っていきますが、CSS組版ではそれをCSSプロパティに置き換えていくことになります。
本書は、組版の知識はないがHTMLとCSSの経験がある読者を想定しているので、HTMLやCSSの基礎の説明は軽くして、組版や印刷の解説は気持ち厚めになるよう解説しています。ですので、HTML＆CSSの入門書を読んでいただいた上で、本書で組版指定とCSSの対応関係をつかんでいけば、比較的マスターしやすいのではないかと思います。
今のところ、CSS組版とVivliostyleは当社の中でも様々な試行錯誤を重ねている最中で、技術的なノウハウやトラブルシューティングの蓄積を推し進めているところです。それでも、すでに技術同人誌や商業書籍が刊行できるレベルには到達しており、コードや数式が扱いやすい、（執筆・制作体制次第ですが）修正に強いといったメリットがあることも明らかです。
興味を持たれた出版社様、その他業種の皆さまも、ぜひご相談ください。