Vivliostyle-CLIで作ったドキュメントにHTML要素を追加する：息子と一緒に Makers：So-netブログ

	ブログをはじめるログイン

SPRESENSE（SORA-Q）が月面..｜Vivliostyle-CLIで作ったド.. ブログトップ

Vivliostyle-CLIで作ったドキュメントにHTML要素を追加する　[Vivliostyle] [編集]

前回は簡単なドキュメントを作ったので、そこのHTML要素を追加していきたいと思います。追加するのは、Divクラスを活用したサブタイトル要素とチャプタ用の要素「h2」です。

前回作った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>

    <div class="subtitle">ヌコと書生の物語</div>
    <h2>はじめての出会い</h2>

    <p>どこで生れたかとんと見当がつかぬ。
       何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
       吾輩はここで始めて人間というものを見た。
       しかもあとで聞くとそれは書生という人間で一番獰悪な種族であったそうだ。
       この書生というのは時々我々を捕つかまえて煮て食うという話である。
    </p>
  </body>
 </html>

CSSに要素を追加していきます。前回作成したCSSファイルの最後に h2 と .subtitle 要素を追加していきます。

@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;
}

h2 {
    break-before: verso;  /* 改ページ */
    font-size: 32Q;
    line-height: 48Q;
    inline-size: 10em; /* ボックスの横方向長さ (em:文字サイズを1とした単位) */
    block-size: 1lh; /* ボックスの縦方向長さ (lh:行送りを1とした単位) */
    margin-block: 0 11mm; /* 前後のブロックのマージン */
}

.subtitle {
    font-size: 24Q;
    text-align: center;
    font-weight: 700; /* 太さ */
    margin-block-start: 40mm; /* 上マージン */
}

HTMLファイルを表示させて右クリックでメニューを出して、その中から「これプレビューvivliostyle preview (Current File)」を選択します。

Screenshot from 2024-01-20 12-15-35.png