Vivliostyle-CLIで作ったドキュメントに表紙をつくる

前回ドキュメントに要素を追加してようやく体裁が整ってきました。今回は１ページ目を表紙にしようと思います。１ページ目の背景色をかえてページ番号を付与しないようにするため、次のような要素をCSSファイルに付け加えます。

@page:nth(1) {
    margin: 0;
    background-color: #888888; /* 背景色をグレーに設定 */
    @bottom-center {
        content: none;  /* ページ番号をなくすためにボトムセンターにコンテンツはなし */
    }
}

これをプレビューしてみると次のようになりました。




これでは味気ないので、表紙の背景に画像を用いたいと思います。背景画像にはSVGフォーマットのものを使います。背景となる画像は次のサイトで作ることができます。

https://heropatterns.com/


適当なデザインをクリックすると画面があらわれます。その中にCSSのコードがあるので、それをコピーしてCSSファイルに転記します。





SVGファイルの定義がながいので一部省略をしていますが、次のようになりました。先程定義した背景色の定義は上書きするのに注意してください。

@page:nth(1) {
    margin: 0;
    background-color: #DFDBE5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 ...(省略)... 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
    @bottom-center {
        content: none;  /* ページ番号をなくすためにボトムセンターにコンテンツはなし */
    }
}

プレビューしてみました。少し本っぽくなってきたと思います。



次は章の飾り付けをしてみます。


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

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

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

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

タグ：技術同人誌 vivliostyle