Vivliostyle Themes のハンズオン
•
0 likes•729 views
「CSS組版 Vivliostyle ユーザーと開発者の集い 2021春」にて https://vivliostyle.connpass.com/event/208401/ Vivliostyle Viewer で見る： https://vivliostyle.org/viewer/#src=https://github.com/yamasy1549/slides/blob/master/vivliostyle_meetup_20210410/book/index.html
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Vivliostyle Themes のハンズオン
Similar to Vivliostyle Themes のハンズオン (20)
More from Sanae Yamashita
More from Sanae Yamashita (20)
Recently uploaded
Recently uploaded (20)
Vivliostyle Themes のハンズオン
- 7. ⽂庫本スタイル theme-bunko @vivliostyle/theme-bunko スタンダードな⽂庫本 明朝体 縦書き ルビもOK 縦中横もばっちり Themesまわりの基本的な機能 7
- 11. Themesの作り⽅ 良ければ⼀緒に⼿を動かしましょう💻 https://github.com/yamasy1549/vivliostyle-theme-my-doujin Themesの作り⽅ 11
- 13. ①雛形から作ります yarn create vivliostyle-theme my-doujin $ $ yarn yarn create vivliostyle-theme my-doujin create vivliostyle-theme my-doujin ? description すごい合同誌のTheme ? description すごい合同誌のTheme ? author name わたし ? author name わたし ? author email watashi@example.com ? author email watashi@example.com ? license AGPL-3.0 ? license AGPL-3.0 ? choose category novel ? choose category novel Success Success! ! Created vivliostyle-theme-my-doujin. Created vivliostyle-theme-my-doujin. 1 1. . cd cd vivliostyle-theme-my-doujin vivliostyle-theme-my-doujin 2 2. edit scss/*.scss . edit scss/*.scss 3 3. publish to . publish to npm npm ( ($ $ npm npm publish publish) ) ✨ Done ✨ Done in in 46 46.57s. .57s. Themesの作り⽅ 13
- 14. ①雛形から作ります $ $ cd cd vivliostyle-theme-my-doujin vivliostyle-theme-my-doujin $ tree $ tree . . -I node_modules -I node_modules . . ├── LICENSE ├── LICENSE ├── README.md ├── README.md ├── example サンプル原稿 ├── example サンプル原稿 │ ├── default.html │ ├── default.html │ └── default.md 🖋Markdownを書く │ └── default.md 🖋Markdownを書く ├── package.json ├── package.json ├── scss デフォルトで3つのスタイルファイル ├── scss デフォルトで3つのスタイルファイル │ ├── theme_common.scss 🖋 Themeの共通部分 │ ├── theme_common.scss 🖋 Themeの共通部分 │ ├── theme_print.scss 🖋 出版物 │ ├── theme_print.scss 🖋 出版物 ( (PDF PDF) ) 印刷⽤スタイル 印刷⽤スタイル │ └── theme_screen.scss 🖋 出版物 │ └── theme_screen.scss 🖋 出版物 ( (HTML HTML) ) 閲覧⽤スタイル 閲覧⽤スタイル ├── vivliostyle.config.js 🖋 プレビュー⽤設定ファイル ├── vivliostyle.config.js 🖋 プレビュー⽤設定ファイル └── yarn.lock └── yarn.lock Themesの作り⽅ 14
- 15. ②サンプル原稿を⽤意します example/ch01.md # # {吾輩|わがはい}は猫である。 {吾輩|わがはい}は猫である。 ## ## 夏⽬ 漱⽯ 夏⽬ 漱⽯ {吾輩|わがはい}は猫である。 名前はまだ無い。 {吾輩|わがはい}は猫である。 名前はまだ無い。 example/ch02.md # # 羅⽣⾨ 羅⽣⾨ ## ## 芥川 ⿓之介 芥川 ⿓之介 ある⽇の暮⽅の事である。 ⼀⼈の{下⼈|げにん}が ある⽇の暮⽅の事である。 ⼀⼈の{下⼈|げにん}が vivliostyle.config.js module module. .exports exports = = { { language language: : 'ja' 'ja', , theme theme: : 'theme_print.css' 'theme_print.css', , entry entry: : [ [ 'example/ch01.md' 'example/ch01.md', , 'example/ch02.md' 'example/ch02.md', , ] ], , } } Themesの作り⽅ 15
- 16. ③ yarn dev でプレビューします これはデフォルトのスタイル Themesの作り⽅ 16
- 17. ④ページ番号と章番号 scss/theme_{print,screen}.scss /* ... */ /* ... */ @import @import "_my_style" "_my_style"; ; scss/_my_style.scss @page @page : :first first { { counter-reset counter-reset: : p p; ; } } @page @page { { counter-increment counter-increment: : p p; ; } } /* ⼩⼝側、 上にページ番号 */ /* ⼩⼝側、 上にページ番号 */ @page @page : :left left { { @top-left @top-left { { content content: : counter counter( (p p) ); ; } } } } @page @page : :right right { { @top-right @top-right { { content content: : counter counter( (p p) ); ; } } } } Themesの作り⽅ 17
- 18. ④ページ番号と章番号 scss/_my_style.scss /* 章番号 */ /* 章番号 */ @page @page : :nth nth( (1 1) ) { { counter-increment counter-increment: : chapter p chapter p; ; } } /* 章タイトル */ /* 章タイトル */ h1 h1 { { & &::before ::before { { content content: : "第 " "第 " counter counter( (chapter chapter) ) " 章" " 章"; ; display display: : block block; ; } } } } Themesの作り⽅ 18
- 19. ④ページ番号と章番号 scss/_my_style.scss /* 章タイトル */ /* 章タイトル */ h1 h1 { { border-top border-top: : 10 10pt pt solid solid black black; ; & &::before ::before { { content content: : "第 " "第 " counter counter( (chapter chapter) ) " 章" " 章"; ; display display: : block block; ; font-size font-size: : 80 80% %; ; margin margin: : 10 10pt pt auto auto; ; } } } } /* 著者名 */ /* 著者名 */ h2 h2 { { text-align text-align: : right right; ; border-bottom border-bottom: : 10 10pt pt solid solid black black; ; } } Themesの作り⽅ 19
- 20. ⑤⽬次 vivliostyle.config.js module module. .exports exports = = { { // ... // ... entry entry: : [ [ { { rel rel: : 'contents' 'contents', , theme theme: : 'theme_toc.css' 'theme_toc.css' } }, , // ... // ... ] ], , toc toc: : true true, , tocTitle tocTitle: : "⽬次" "⽬次", , } } scss/theme_toc.scss @import @import "theme_common" "theme_common"; ; Themesの作り⽅ 20
- 21. ⑤⽬次 scss/theme_toc.scss @import @import "theme_common" "theme_common"; ; /* いらないところを消す */ /* いらないところを消す */ @page @page : :left left { { @top-left @top-left { { content content: : "" ""; ; } } } } @page @page : :right right { { @top-right @top-right { { content content: : "" ""; ; } } } } h1 h1 { { display display: : none none; ; } } h2 h2 { { text-indent text-indent: : 0 0; ; } } nav ol nav ol { { padding padding: : 0 0; ; list-style list-style: : none none; ; } } Themesの作り⽅ 21
- 22. ⑤⽬次 scss/theme_toc.scss nav ol nav ol { { /* ... */ /* ... */ li a li a { { text-decoration text-decoration: : none none; ; color color: : inherit inherit; ; & &::before ::before { { content content: : "第 " "第 " target-counter target-counter( ( attr attr( (href url href url) ), , chapter chapter) ) " 章" " 章"; ; margin-right margin-right: : 1 1rem rem; ; } } & &::after ::after { { content content: : target-counter target-counter( (attr attr( (href url href url) ), , p p) ); ; float float: : right right; ; } } } } } } Themesの作り⽅ 22
- 23. ⑥原稿ごとのテーマカラー vivliostyle.config.js // ... // ... { { path path: : 'example/ch01.md' 'example/ch01.md', , theme theme: : 'theme_ch01.css' 'theme_ch01.css', , } }, , { { path path: : 'example/ch02.md' 'example/ch02.md', , theme theme: : 'theme_ch02.css' 'theme_ch02.css', , } }, , scss/theme_ch01.scss @import @import "theme_print" "theme_print"; ; h1 h1, , h2 h2 { { border-color border-color: : darkcyan darkcyan; ; } } Themesの作り⽅ 23
- 25. 原稿で <body> のclassを設定 ch01.md --- --- class: natsume class: natsume --- --- 夏⽬漱⽯ 夏⽬漱⽯ ch02.md --- --- class: akutagawa class: akutagawa --- --- 芥川⿓之介 芥川⿓之介 vfm@v1.0.0-alpha.18にて実装済み 原稿ファイルごとのスタイル付与が格 段にやりやすくなる！ 先程の例だとこんな感じ scss/theme_common.scss body.natsume body.natsume { { h1, h2 h1, h2 { { border-color border-color: : darkcyan darkcyan; ; } } } } body.akutagawa body.akutagawa { { h1, h2 h1, h2 { { border-color border-color: : sienna sienna; ; } } } } 近いうちできるようになること 25