Vivliostyle-CLIで簡単なドキュメントを作ってみる [Vivliostyle]
Vivliostyle-CLIを導入したので、Visual Studio Code で簡単なドキュメントを作ってみます。まずはワークスペースとしてフォルダ「mybook0」を作成します。その中に、「mybook0.html」と「mybook0.css」というファイルを作成します。
Visual Studio Code のメニューから「フォルダを開く」でmybook0 を開いて、「名前をつけてワークスペースを保存...」で保存しておきます。Visual Studio Code の画面は次のようになります。
mybook0.htmlにはドキュメントの内容をHTML形式で記述します。
mybook0.css には次のようにページ設定と各要素の定義を記述します。ページ設定は @page という要素で指定します。
ここで天・地・小口・ノドは次のようになっています。
(出典:https://www.book-hon.com/column/9961/)
ドキュメントをビルドするには、html ファイルを開いた状態で右クリックをするとメニューが開くので、その中から「vivliostyle cli helper」を選択し、「これプレビューvivliostyle preview(Current File)」を指定します。
すると別画面が開いて、次のようにプレビューを見ることができます。
次からはいろいろと装飾をしていきたいと思います。
※この記事は次の本を参考にしています。
前のVivliostyleの記事 次のVivliostyleの記事
Visual Studio Code のメニューから「フォルダを開く」でmybook0 を開いて、「名前をつけてワークスペースを保存...」で保存しておきます。Visual Studio Code の画面は次のようになります。
mybook0.htmlにはドキュメントの内容をHTML形式で記述します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>吾輩はヌコである</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="mybook0.css" /> </head> <body> <h1>吾輩はヌコである</h1> <p>どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそれは書生という人間で一番獰悪な種族であったそうだ。 この書生というのは時々我々を捕つかまえて煮て食うという話である。 </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; /* 孤立行は1行に */ orphans: 1; /* 孤立行は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 技術同人誌
コメント 0