CSS組版おもしろい！

CSS組版おもしろい！ 2018.09.03 @at_grandpa 技術同人誌再販Night★#2

@at_grandpa

圧倒亭グランパのブログ

技術書典4にて頒布おかげさまで完売しました ※本日、頒布しています “におうコードの問題集 booth (pdf|冊子)”  で検索

執筆環境、どうしていますか？

✔ Re:VIEW ? ✔ Word ? ✔ Google Docs ?
✔ Gitbook ?  ✔ 手書き ?

技術書典4の執筆環境 ✔ Re:VIEW  　- Docker上でpdfのbuild 　- github管理できる　- textlintなどの校正ツールを使える　-
ciを回せる　　- textlint 　　- 使用コードのテスト

実際のpdf

が！

問題集っぽくない！

こういうことしたい Chapter1 におうコードの問題集におうコードの問題集ここが重要！問題１コラム • コラム •
class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr

class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい

class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい見出しをカッコよくしたい

class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい見出しをカッコよくしたい問題集っぽくしたい

class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい見出しをカッコよくしたい問題集っぽくしたい箇条書きのアイコンをいい感じにしたい

class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい見出しをカッコよくしたい問題集っぽくしたい箇条書きのアイコンをいい感じにしたいコラムとかも楽しげにしたい

class MyClass def initialize(@name, @age) end def hello puts "hello" end end ▶ sample.cr いい感じの色をつけたい見出しをカッコよくしたい問題集っぽくしたい箇条書きのアイコンをいい感じにしたいコラムとかも楽しげにしたいコードも綺麗に表示したい

とにかくいい感じにしたい

そこで

Re:VIEW + CSS組版

Re:VIEW + CSS組版 ✔ Re:VIEWのいいとこそのまま　- github管理できる　- textlintなどの校正ツールを使える　-
ciを回せる ✔ CSSの自由度で組版　- Webレイアウトのように組版　- Chrome Dev Tools で微調整

Re:VIEW + CSS組版 ✔ わかめさんのリポジトリ　- github → vvakame/review-css-typesetting 　-
整いつつある ✔ 簡単に構築できるようにした　- make と docker さえあれば OK 　- コマンド１つでpdf出力　- コマンド１つでブラウザで確認　- ci回せる

Re:VIEW + CSS組版 http://at-grandpa.hatenablog.jp/entry/2018/08/20/121043 詳しくはブログで！ [Re:VIEW CSS組版簡単] で検索

デモ（時間があれば） LT後も、興味がある方は気軽にお声掛けください

まとめ ✔ Re:VIEW+CSS組版を簡単に！　- コマンドひとつで pdf & ブラウザ確認 ✔ CSS組版広まって欲しい
　- デザイン豊富な同人誌が増えるのでは？

技術書典5で会いましょう

CSS組版おもしろい！

CSS組版おもしろい！

at_grandpa

More Decks by at_grandpa

Other Decks in Technology

Featured

Transcript