cols 段組み

柔軟な段組を実現できます。

もくじ

使い方

// 簡単な2段組みの例

#cols{{

右のカラム

====

左のカラム

}}

※「====」は段を分ける区切り文字です。

段組オプション

カラムの幅の指定

横幅を12分割したものの内いくつ分の幅で段組するか（N/12）、を指定します。

同じ幅で2段組

//同じ幅で2段組
#cols(6,6){{
左のカラム
====
右のカラム
}}

例：

様々な幅で3段組

//様々な幅で3段組
#cols(3,4,5){{
左のカラム
====
中央のカラム
====
右のカラム
}}

例：

余白の指定

各カラムの左に余白を追加できます。余白の幅もN/12で表現します。

半分の幅のカラム1つを中央に寄せる

//半分の幅のカラム1つを中央に寄せる
#cols(6+3){{
カラム
}}

例：

2段組を右に寄せる

//2段組を右に寄せる
#cols(4+4,4){{
左のカラム（余白あり）
====
右のカラム
}}

例：

カラムの移動

PC上で特定のカラムを左右端に移動することができます。

左のカラムを右側に移動
この場合、PCでは、2:右、1:左で表示されます。
スマホでは、1:左、2:右 の順で縦に並んで表示されます。

//左のカラムを右側に移動
#cols(6r,6){{
1．左のカラム（右に移動します）
====
2．右のカラム（左にずれます）
}}

例：

右端のカラムを左側に移動
この場合、PCでは、3:右、1:左、2:真ん中で表示されます。
スマホでは、1:左、2:真ん中、3:左 の順で縦に並んで表示されます。

//右端のカラムを左側に移動
#cols(4,6,2l){{
1．左のカラム（中央にずれます）
====
2．中央のカラム（右にずれます）
====
３．右のカラム（左に移動します）
}}

例：

余白付きのカラムを右に移動
この場合、PCでは、2:右、1:左で表示されます。
スマホでは、1:左、2:右 の順で縦に並んで表示されます。

//余白付きのカラムを右に移動
#cols(4+2r,4){{
1．左のカラム（右に移動しますが、余白は右に移動しません）
====
2．右のカラム（左にずれますが、余白よりは左にずれません）
}}

例：

クラスの指定

カラムに任意のクラス名を付けることができます。

//左のカラムに text-center クラスを付ける
#cols(6.text-center,6){{
左のカラム
（text-center クラスが付きます）
====
右のカラム
}}

※ text-center は、文章を中央寄せにするクラスです。

例:

//複数のクラスを付ける
#cols(3,4.text-center.text-muted,5){{
左のカラム
====
中央のカラム（text-center と text-muted クラスが付きます）
====
右のカラム
}}

※ text-center は、文章を中央寄せにするクラスです。
※ text-muted は、文字の色をグレーにするクラスです。

例：

カラムの区切り線を変更する

標準ではカラムの区切り線は半角イコール4つ====ですが、変更することができます。
cols を入れ子にする時に使います。

//区切り線を ++++ に変更
#cols(6,6,++++){{
左のカラム
++++
右のカラム
====
↑= では区切られなくなるので、右のカラムの一部です。
}}

//cols の入れ子
#cols(4,3,5){{
左のカラム
====

#cols(6,6,++++){{{
中央左のカラム
++++
中央右のカラム
}}}

====
右のカラム
}}

例：

段組全体にクラスを付ける

//段組全体に text-right クラスを付ける
#cols(6,6,class=text-right){{
左のカラム
====
右のカラム
}}

例：

段組内の文字を中央寄せにする

//段組内の文字を中央寄せにする(right：右寄せ, left：左寄せ)も可能です
#cols(6,6,center){{
左のカラム
====
右のカラム
}}

例：