【ITニュース解説】VFMで学会論文を書いてVivliostyleで組んで投稿する[後編]

2025年01月29日に「Gihyo.jp」が公開したITニュース「VFMで学会論文を書いてVivliostyleで組んで投稿する[後編]」について初心者にもわかりやすいように丁寧に解説しています。

作成日: 更新日:

ITニュース概要

VFMで書いた学会論文をVivliostyleで組版し投稿する方法の後編。CSSによる論文レイアウトの実現方法を解説する。段組み、数式番号、参考文献リストなど、論文特有の要素をCSSで調整するテクニックを紹介。Web技術を活用し、効率的な論文作成を目指す。

ITニュース解説

この記事では、VFM(Vivliostyle Flavored Markdown)で記述した論文をVivliostyleを使って組版し、学会へ投稿するためのCSSによるレイアウト調整について解説する。特に、論文特有のレイアウトを実現するための具体的なCSSの記述方法に焦点を当てている。

まず、段組みレイアウトについて解説する。多くの論文では、本文が複数段に分かれて表示される。これを実現するために、CSSのcolumn-countプロパティやcolumn-gapプロパティを使用する。column-countは段数を指定し、column-gapは段と段の間の幅を指定する。例えば、column-count: 2;と記述すれば、コンテンツは2段組みで表示される。段の間隔は、column-gap: 1em;のように指定する。これにより、読みやすい段組みレイアウトを作成できる。また、段組みの中で特定の要素が段をまたがないようにするために、break-inside: avoid;というCSSプロパティを使用する。これにより、図表や数式などが途中で分割されるのを防ぎ、視覚的なまとまりを保つことができる。

次に、脚注の配置について解説する。論文において脚注は重要な役割を果たす。Vivliostyleでは、CSSのfloatプロパティやpositionプロパティを組み合わせることで、脚注を適切に配置できる。一般的に、脚注はページの最下部に表示されることが多い。これを実現するためには、脚注を含む要素にfloat: bottom;position: fixed; bottom: 0;といったスタイルを適用する。ただし、これらのプロパティは要素を通常とは異なる位置に配置するため、他の要素との重なりやレイアウトの崩れに注意する必要がある。必要に応じて、marginpaddingを調整し、脚注が適切に表示されるようにする。

さらに、数式の扱いについて解説する。論文には数式が頻繁に登場する。Vivliostyleでは、MathJaxなどの数式レンダリングエンジンと連携することで、数式を美しく表示できる。MathJaxを導入するには、HTMLファイルにMathJaxのスクリプトを埋め込む必要がある。また、数式が適切に表示されるように、CSSでフォントサイズや行間などを調整する。数式が長すぎてページからはみ出す場合は、overflow-x: auto;などのプロパティを使用して、水平スクロールを可能にする。これにより、数式全体を表示できるようになる。

図表の配置も重要な要素である。論文では、図表は本文と関連付けて表示される。Vivliostyleでは、floatプロパティやpositionプロパティを使用して、図表を適切な位置に配置できる。例えば、float: right;と記述すれば、図表は右側に配置され、本文がその周りを回り込むように表示される。また、図表にはキャプションを付けることが一般的である。キャプションは、figcaption要素を使用して記述し、CSSでスタイルを調整する。キャプションのフォントサイズや配置、図表との間隔などを調整することで、図表の見栄えを向上させることができる。図表が大きすぎる場合は、max-widthプロパティを使用して、図表の最大幅を制限する。これにより、図表がページからはみ出すのを防ぐことができる。

参考文献リストの作成についても触れておく。論文の最後に参考文献リストは不可欠である。Vivliostyleでは、参考文献リストをol要素やul要素を使用して記述し、CSSでスタイルを調整する。参考文献のフォーマットは、学会やジャーナルによって異なる場合があるため、それぞれの規定に従ってスタイルを調整する必要がある。例えば、参考文献の著者名やタイトル、発行年などを適切な順序で表示し、イタリック体やボールド体などのスタイルを適用する。また、参考文献リストのインデントや行間などを調整することで、読みやすいリストを作成できる。

最後に、Vivliostyleの便利な機能として、自動ページ番号の挿入がある。CSSのcounterプロパティを使用することで、ページ番号を自動的に挿入できる。例えば、content: counter(page);と記述すれば、現在のページ番号が表示される。また、@pageルールを使用することで、ページ番号の配置やスタイルを調整できる。ページ番号は、通常、ページのヘッダーまたはフッターに表示される。ヘッダーやフッターのスタイルを調整することで、ページ番号の見栄えを向上させることができる。

これらのCSSのテクニックを駆使することで、VFMで記述した論文をVivliostyleで美しく組版し、学会へ投稿するための準備を整えることができる。