「CSS組版 Vivliostyle ユーザーと開発者の集い 2022春」にて https://vivliostyle.connpass.com/event/243092/ Vivliostyle Viewer で見る： https://vivliostyle.org/viewer/#src=https://github.com/yamasy1549/slides/blob/master/vivliostyle_meetup_20220423/book/index.html&spread=false

1. vivliostyle.orgではじめる
CSS組版チュートリアル
CSS組版Vivliostyleユーザーと開発者の集い2022春
2022.04.23 やましー

2. やましー@yamasy1549
スパイスカレーづくりが趣味の学生🍛
プログラミング言語かるたをつくった
Vivliostyleを応援する者
Vivliostyleを使って卒論を書いた
VivliostyleThemesに関わっている
はじめに 2

3. チュートリアルの公開
https://vivliostyle.org/ja/tutorials/
CSS組版に関する日本語チュートリアルを公開しました🎉
チュートリアルの公開 3

4. 経緯
Vivliostyle関連ツールのドキュメントが整備されている
一方で、
「Vivliostyle触ってみようかな」
の後のハードルが高い
CSSを書いても思い通りの見た目にならない……
○○はどう書けばいい？
そもそもCSS組版で何ができるかわからない
チュートリアルの公開 4

5. CSS組版に関する情報
情報はあるが、
点在している
Vivliostyle公式の資料
（例）
VivliostyleがサポートするCSS機能
VivliostyleCoreのテストケースとそのソース
公式ブログのリリース報告記事
今日の発表者のスライド資料
チュートリアルの公開 5

6. CSS組版に関するtipsの集約
公式サイトを見れば疑問を解決できるようにしたい
CSS組版入門ドキュメント
ケースごとのサンプル
etc...
チュートリアルの公開 6

7. チュートリアルの内容紹介
https://vivliostyle.org/ja/tutorials/
チュートリアルの内容紹介 7

8. チュートリアルの目標
Vivliostyleを使ってPDF形式の出版物を作成できる
CSS組版に慣れていなくても、
CSS組版の基本が理解できる
チュートリアルの内容紹介 8

9. 目次
①インストール
②PDFの作成
③原稿とテーマのカスタマイズ
④用紙と文字のスタイル
⑤カウンタと柱のスタイル
⑥基本的な要素のスタイル
⑦目次の作成
チュートリアルの内容紹介 9

10. ①インストール
Vivliostyleで出版物を作るための準備
チュートリアルの内容紹介 10

11. ②PDFの作成
雛形の作成
PDFの作成
プレビュー機能の使い方
チュートリアルの内容紹介 11

12. ③原稿とテーマのカスタマイズ
PDFの作成に必要なファイル
設定ファイルの構造
原稿ファイル・既存テーマのカス
タマイズ方法
チュートリアルの内容紹介 12

13. ④用紙と文字のスタイル
用紙の設定
用紙サイズ・余白
ページの始まる側
空白ページ
文字の設定
組方向
フォント
行末処理
チュートリアルの内容紹介 13

14. ⑤カウンタと柱のスタイル
カウンタの設定
ノンブルの設定
柱の設定
チュートリアルの内容紹介 14

15. ⑥基本的な要素のスタイル
セクションのスタイル
見出しのスタイル
ソースコードのスタイル
図のスタイル
後注のスタイル
チュートリアルの内容紹介 15

16. ⑦目次の作成
自動作成
手動作成
チュートリアルの内容紹介 16

17. 今後の予定
今後の予定 17

18. チュートリアルの章を追加
段組みの設定
Webフォントの設定
入稿用PDFの作り方
etc...
今後の予定 18

19. 上級編？
Vivliostyleには便利な機能がどんどん追加されている
名前付き文字列(Namedstrings)
Pagefloat
etc...
https://docs.vivliostyle.org/#/ja/supported-css-features
今後の予定 19

20. まとめ
Vivliostyleを使ったCSS組版入門チュートリアルの公開
https://vivliostyle.org/ja/tutorials/
今後もコンテンツを追加予定
🖋Happywriting!
おわりに 20