紙面組版の「文字組み」CSS再現。
今回はコラムについて書きたいと思います。
InDesignを参考に進めたいと思います。

 コラム

コラムとはテキストフレームをフレーム内で均等に分割する体裁です。
InDesignでは段組と読んでいます。
 

テキストフレーム設定
テキストフレーム設定

▲InDesignのオブジェクトメニューから「テキストフレーム設定」を選択します。
または、テキストフレームを右クリックしてコンテクストメニューを表示。「テキストフレーム設定」を選択で表示できます。
 
テキストフレーム設定
▲「テキストフレーム設定」が開きます。
一般より段数間隔を入力し調整します。
段組はCSSには関係ないので省略します。
 
テキストフレーム
▲数値通り、3段組、間隔3mmのフレームになりました。
 
HTML、CSSでは下のようになります。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。「何でも薄暗い」じめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮にて食うという話である。

CSS

#txtColumn {
column-count: 3;
column-gap: 25px;
}

単位はInDesignとは異なりますが、column-countでコラム数を指定し、column-gapで間隔を指定します。
 
InDesign 2020からはコラム間に罫線が挿入できようになりました。
段間罫線
▲テキストフレーム設定の「段間罫線」の項目。
 
段間罫線
▲線 > 種類から「段間罫線」の線種を表示。
ベタ、二重線、句点、点線がCSSと共通しているようです。
それぞれをInDesignで設定したのが下図です。
段間罫線
▲上から「ベタ」「二重線」「句点」「点線」。
線幅は1mmに設定してあります。
「点線」はある程度のフレームの高さがないとこのような体裁になってしまいます。
「句点」の他にも「点」というものが存在しますが、句点よりも間隔が広く取られているようです。
必要あるのかなぁ???
 
ではCSSで再現してみましょう。
CSSプロパティにはcolumn-ruleという線の幅(column-rule-width)、スタイル(column-rule-style )、色(column-rule-color)をまとめて指定するショートハンドがあります。
つまり、下記のCSS2つは同じ結果になるということです。

column-rule:3px solid red;
column-rule-width: 3px;
column-rule-style: solid;
column-rule-color: red;

 
では、InDesignと共通の段間罫線をHTML、CSSで再現してみましょう。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。「何でも薄暗い」じめじめした所でニャーニャー泣いていた事だけは記憶している。

solid ベタ
 

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。「何でも薄暗い」じめじめした所でニャーニャー泣いていた事だけは記憶している。

double 二重線
 

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。「何でも薄暗い」じめじめした所でニャーニャー泣いていた事だけは記憶している。

dashed 波線(点線)
 

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。「何でも薄暗い」じめじめした所でニャーニャー泣いていた事だけは記憶している。

dotted 句点、もしくは点
 
column-rule-styleには他にも、

groove
立体的に窪んだ線で表示される。
ridge
立体的に隆起した線で表示される。
inset
ridgeと同じ。
outset
grooveと同じ。

引用元:HTML クイックリファレンス 

などのスタイルがあります。
 

まとめ

段間罫線はCSSの方が先に実装されていました。
InDesign、CSSともに罫線の種類は豊富ですが本当に必要なの?と疑問に思うものもあります。
あまり凝りすぎた体裁は見栄えが悪くなるのでさりげなく使いたいと思います。
 
最後まで読んでくださりありがとうございました。
 

関連記事




Pocket
LINEで送る