はじめに
七尾百合子さん、お誕生日 214日目 おめでとうございます！ nikkieです。
Vivliostyle 小ネタです。
目次
CSS を追加する
erukiti さんによる方法です1
該当箇所はこちらに公開されています。
https://github.com/erukiti/vivliostyle-techbook-starter/blob/4ad7cac35ac4d54b237b75e75c442c7690c7f8aa/src/chap-theme.md?plain=1#L35-L77
筆者としてはRe:VIEWのようなコラムを書きたいです。
columnとcolumn-titleというクラスにスタイルを定義
私が使う範囲では疑似要素による「■コラム」はいらなかったので、取捨選択しました。
ゆめみ大技林テンプレートに追加しています
https://github.com/yumemi-inc/daigirin-template/tree/a4a05803b0d794311efe939763f8d16e369fa6e1/book/theme/theme-custom
book/
└── theme/
└── theme-custom/
├── themes/
│ └── column.css
└── index.css
index.cssで@import
@import url(./themes/column.css);
column.css
rem は root の em（font-size の計算値）
<length> - CSS: カスケーディングスタイルシート | MDN
CSS変数、すげ〜（初対面）
CSS カスタムプロパティ（変数）の使用 - CSS: カスケーディングスタイルシート | MDN
注意：HTML になるので、Markdown は使えない
当初は次のように書いていました。
<div class="column"> <div class="column-title">続く節からはネタバレ全開です。見てから読んでください。</div> 全人類、**とにかく見て**くれ！！ </div>
この部分は HTML なので、強調したい場合は ** マークアップではなく <strong> タグを使うことになります。
<div class="column"> <div class="column-title">続く節からはネタバレ全開です。見てから読んでください。</div> 全人類、<strong>とにかく見て</strong>くれ！！ </div>
なぜVivliostyle？ 合同誌に寄稿しています！
（寄稿はすでに締切を迎えました）
Vivliostyle は普段触らない技術なので、前回の寄稿に続いて学びがありました。
寄稿したのは、『不思議の国でアリスと』についてです。
実は繰り返し見る中で気づいたことがあります。
それはソフトウェアエンジニアの学びでもあるので、こちらの合同誌に寄稿しました。
コラムはこんな感じで使いました。
vol.1 に続き、寄稿者たくさんの vol.2 となっています。
手にとっていただけたら嬉しいです！
#技書博 12 にて、「#エンジニアニメ Anthology Tech Book 2nd Season」を頒布します！🎉
— エンジニアニメ 10/24開催 (@engineers_anime) 2025年10月7日
総勢20名のエンジニアが「アニメから得た学び」をテーマに執筆したアンソロジー本です。
10月26日（日）、サークルスペース「か-06」《エンジニアニメ》にてお待ちしています！ pic.twitter.com/lCgLN94Z8e
終わりに
Vivliostyle にコラムを追加できました。
CSS で PDF のスタイルを変えられるのは（使っているSphinxではできないと思うので）めちゃめちゃ便利ですね
ふーん、あんたVivliostyleっていうんだって？
— nikkie(にっきー) / にっP (@ftnext) 2025年5月5日
こっちはずっとSphinxで技術同人誌のPDF作ってんだ。
ちょいとツラ貸しな
（テンプレートに沿って、ごそごそ）
フルカラーでビルドされて、すっげー！！！！
- この同人誌をパラパラ見ていて ↩
