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

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

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

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



今回は「h2」要素は章の見出しで改ページを追加したので、２ページになります。








１ページ目は表紙で、２ページ目から本文になります。少し書籍らしくなってきました。
次は表紙の飾り付けをしたいと思います。


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


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

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




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