Vivliostyle-CLIで簡単なドキュメントを作ってみる

Vivliostyle-CLIを導入したので、Visual Studio Code で簡単なドキュメントを作ってみます。まずはワークスペースとしてフォルダ「mybook0」を作成します。その中に、「mybook0.html」と「mybook0.css」というファイルを作成します。

Visual Studio Code のメニューから「フォルダを開く」でmybook0 を開いて、「名前をつけてワークスペースを保存...」で保存しておきます。Visual Studio Code の画面は次のようになります。

mybook0.htmlにはドキュメントの内容をHTML形式で記述します。


<!DOCTYPE html>
&lthtml>
  &lthead>
    &ltmeta charset="utf-8" />
    &lttitle>吾輩はヌコである</title>
    &ltmeta name="viewport" content="width=device-width, initial-scale=1" />
    &ltlink rel="stylesheet" href="mybook0.css" />
  </head>
  &ltbody>
    &lth1>吾輩はヌコである</h1>
    &ltp>どこで生れたかとんと見当がつかぬ。
       何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
       吾輩はここで始めて人間というものを見た。
       しかもあとで聞くとそれは書生という人間で一番獰悪な種族であったそうだ。
       この書生というのは時々我々を捕つかまえて煮て食うという話である。
    </p>
  </body>
 </html>

mybook0.css には次のようにページ設定と各要素の定義を記述します。ページ設定は @page という要素で指定します。


@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

* {
    box-sizing: border-box; /* 要素の計算方法を指定　*/
    /* boder-box は、子要素は親要素のサイズに制約され、*/
    /* ボックスの幅を指定できる */
}

@page {
    size: 148mm 210mm; /* A4 */
    font-size: 10Q; /* 1Q = 0.25mm */
    /* ボトムセンターにページ番号を設定 */
    @bottom-center { content: counter(page); } 
}

@page: left { /* 左ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* 小口、ノドのマージン */
    margin-inline: 16mm 18.25mm; 
}

@page: right { /* 右ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* ノド、小口のマージン */
    margin-inline: 18.25mm 16mm; 
}

:root { /* 共通設定 */
    font-size: 13Q;  /* フォントサイズ */
    line-height: 24Q; /* 段落の行送りサイズ */
    font-family: "Noto Sans JP"; /* フォント指定 */
    /* フォント太さを指定 100,200,...800,900 ノーマルは400 */
    font-weight: 400;  
    text-spacing: auto; /* 文字組設定を自動 */
    widows: 1; /* 孤立行は１行に */
    orphans: 1; /* 孤立行は１行に */
}

p {
    font-size: 13Q;
    line-height: 24Q;
    text-align: justify;  /* 行末揃え */
    /* 字下げ設定 em:文字サイズを1とした総体単位 */
    text-indent: 1em; 
    margin-block: 0;
}

h1 {
    font-size: 42Q;
    line-height: 100Q;
    margin-block-start: 40mm; /* 天のマージン */
    text-align: center;
    counter-reset: section-counter 0;
}

ここで天・地・小口・ノドは次のようになっています。
(出典：https://www.book-hon.com/column/9961/)

ドキュメントをビルドするには、html ファイルを開いた状態で右クリックをするとメニューが開くので、その中から「vivliostyle cli helper」を選択し、「これプレビューvivliostyle preview(Current File)」を指定します。

すると別画面が開いて、次のようにプレビューを見ることができます。

次からはいろいろと装飾をしていきたいと思います。

※この記事は次の本を参考にしています。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

前のVivliostyleの記事　　次のVivliostyleの記事

Vivliostyle-CLIで簡単なドキュメントを作ってみる

関連する記事