cols 段組み

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

もくじ

使い方

// 簡単な2段組みの例

#cols{{

右のカラム

====

左のカラム

}}

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

段組オプション

カラムの幅の指定

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

同じ幅で2段組

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

例:

左のカラム
わかりやすいように、色を付けています。
水色です。

右のカラム
わかりやすいように、色を付けています。
緑色です。

様々な幅で3段組

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

例:

左のカラム
12分割の3個分
水色です。

中央のカラム
12分割の4個分
オレンジ色です。

右のカラム
12分割の5個分
緑色です。


余白の指定

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

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

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

例:

真ん中のコンテンツに6個分
右に3個分、左に3個分の余白を指定しました。

3(余白:左) + 6(コンテンツ) + 3(余白:右) = 12 です。

※ わかりやすいように色をつけています。

2段組を右に寄せる

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

例:

左のカラム(余白4)

右のカラム


カラムの移動

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

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

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

例:

1.左のカラム(右に移動します)

2.右のカラム(左にずれます)


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

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

例:

1.左のカラム(中央にずれます)

2.中央のカラム(右にずれます)

3.右のカラム(左に移動します)


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

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

例:

1.左のカラム(右に移動しますが、余白は右に移動しません)

2.右のカラム(左にずれますが、余白よりは左にずれません)


クラスの指定

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

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

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

例:

左のカラム
(text-center クラスが付きます)

右のカラム

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

※ 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){{
左のカラム
====
右のカラム
}}

例:

左のカラム

右のカラム