日本語 | English

テーマとCSS

原稿に対してフォントや文字の大きさなどの装飾を加えるには、カスケーディングスタイルシート(CSS)を適用します(HTMLファイルと同様のやり方です)。

スタイルシートの追加の指定

HTMLファイルに指定されているスタイルシートに加えて、追加のスタイルシート(CSSファイル)を使うには、--style オプションでスタイルシートを指定します。

vivliostyle build example.html --style additional-style.css

この方法で指定したスタイルシートは、HTMLファイルで指定されているスタイルシートと同様(作成者スタイルシート)の扱いで、よりあとに指定されたことになるので、CSSのカスケーディング規則により、HTMLファイルからのスタイルの指定を上書きすることになります。

ユーザースタイルシートの指定

ユーザースタイルシートを使うには、--user-style オプションでスタイルシートを指定します。(ユーザースタイルシートは、スタイル指定に !important を付けないかぎり、制作者スタイルシートのスタイル指定を上書きしません。)

vivliostyle build example.html --user-style user-style.css

CSSの内容を直接指定

--css オプションを指定すると、追加したいスタイルシートを直接CSSのテキストで渡すことができます。このオプションは、簡単なスタイルシートやCSS変数を設定するのに便利です。

vivliostyle build example.html --css "body { background-color: lime; }"

ページサイズの指定

-s (--size)オプションでページサイズを指定できます。指定できるサイズは、A5, A4, A3, B5, B4, JIS-B5, JIS-B4, letter, legal, ledgerのいずれか、またはコンマで区切って幅と高さを指定します。

vivliostyle build paper.html -s A4 -o paper.pdf
vivliostyle build letter.html -s letter -o letter.pdf
vivliostyle build slide.html -s 10in,7.5in -o slide.pdf

このオプションは、--css "@page { size: <size>; }" と同等です。

トンボ(crop marks)の指定

-m (--crop-marks)オプションを指定すると、出力されるPDFにトンボ(印刷物の裁断位置を示す目印)が追加されます。

vivliostyle build example.html -m

--bleed オプションでトンボを追加したときの塗り足し幅を指定することができます。また、--crop-offset オプションで裁ち落とし線から外側の幅を指定することができます。

vivliostyle build example.html -m --bleed 5mm
vivliostyle build example.html -m --crop-offset 20mm

このオプションは、--css "@page { marks: crop cross; bleed: <bleed>; crop-offset: <crop-offset>; }" と同等です。

Vivliostyle Themesについて

Vivliostyle Themesは、Vivliostyleで出版物を作る際に使う公式のスタイルテーマ集です。Vivliostyle Themesを参照することで、自分でCSSを用意することなくスタイルを適用することができます。

テーマを見つける

npmパッケージとして公開されているテーマを見つけるにはnpmでキーワード"vivliostyle-theme"を検索してください:

テーマの利用

-T--theme)オプション、または構成ファイルtheme を指定するとテーマを利用できます。ローカルにテーマファイルが存在しない場合、初回実行時に themes ディレクトリに自動的にインストールされます。

vivliostyle build manuscript.md --theme @vivliostyle/theme-techbook -o paper.pdf

また、ローカル環境にあるテーマを利用することもできます。単一のCSSファイルであれば、以下のように直接CSSファイルを指定します。

vivliostyle build manuscript.md --theme ./my-theme/style.css -o paper.pdf

また、ローカル環境にnpmに準拠した package.json ファイルがある場合、そのディレクトリにあるVivliostyle Themeを読み込むこともできます。以下は my-theme ディレクトリにVivliostyle Themeとして利用可能なパッケージが配置されているときの例です。

vivliostyle build manuscript.md --theme ./my-theme -o paper.pdf

Create Bookの利用

Create Bookを使用すると、あらかじめテーマが設定された状態のプロジェクトを簡単に作成できます。Create Bookを参照してください。