Template:Columns-list/sandbox

これはTemplate:Columns-list (差分)のテンプレート・サンドボックスページです。
対応するテストケース・サブページもご確認ください。

ブラウザのCSS3マルチカラムレイアウト対応
プロパティ	IE	Edge	Firefox	Safari	Chrome	Opera
column-width column-count	≥ 10 (2012)	≥ 12 (2015)	≥ 1.5 (2005)	≥ 3 (2007)	≥ 1 (2008)	≥ 11.1 (2011)
columns	≥ 10 (2012)	≥ 12 (2015)	≥ 9 (2011)	≥ 3 (2007)	≥ 1 (2008)	≥ 11.1 (2011)
break-before break-after break-inside	≥ 10 (2012)	≥ 12 (2015)	≥ 65 (2019)	≥ 10 (2016)	≥ 50 (2016)	≥ 11.1 (2011)

Luaモジュールを使用しています:

モジュール:Columns-list

このテンプレートはテンプレートスタイルを使用しています:

Template:Columns-list/styles.css

ショートカット:

{{Col-list}}
{{Cmn}}

リストを段組みで表示するためのテンプレートです。リスト以外を含む内容を段組みで表示する場合には{{Div col}}を使用してください。

使い方

列幅／列数の指定

各列の幅（column-width）を下のように指定することができます。

{{columns-list|30em|
* ほげ
* ふが
}}

列数は、指定された列幅と画面幅に応じて、幅の広い画面では多くの段組で表示するなど、動的に決まります。第1引数に単位なしの数字を指定した場合、列数（column-count）が直接指定されることになりますが、上述の理由により非推奨です。

列幅の指定は、引数名|colwidth=、|col-width=、|column-width=を使用しての指定、引数名を省略した第1引数としての指定、いずれでも可能です。使用できる単位は、em・pt・pxなどです。

表示内容の指定

第2引数（列幅を引数名付きで指定する場合は第1引数でも可）もしくは|content=に

* ほげ
* ふが
* ぴよ

や

# foo
# bar
# baz

のような箇条書きを指定してください。

* ほげ
* ふが
* ぴよ
# foo
# bar
# baz

のようなかたちで<ul>...</ul>要素と<ol>...</ol>要素を混在させる書き方^{[注 1]}や

* ほげ
* ふが
* ぴよ

* foo
* bar
* baz

のように改行を含めることにより<ul>...</ul>（<ol>...</ol>）要素が複数に分かれてしまう書き方は、適切な表示がなされない場合があるので避けてください。

この引数内でHTMLタグを使用する場合は、{{#tag:}}マジックワードを使用してください。

その他の引数

|plainlist=1を指定すると、{{Plainlist}}のようにビュレットなしの記号とすることができます。
|rules=引数には、列間の線（段間罫）をのように指定します（例：1px dashed #888）。
|gap=引数には、列間の隙間（溝）を指定します（例：3em）。
|small=1を指定すると、フォント・サイズが90パーセントになります（モバイル版などを除く）。
|style=引数には、任意のCSSプロパティを指定することができます。

{{Div col}}との相違点

本テンプレートには、<ul>...</ul>、<ol>...</ol>要素のmargin-topに起因したレイアウト崩れ^{[注 3]}への対策^{[注 4]}がなされていますが、{{Div col}}では同様の対策は行われていません。

使用例

※出力例の枠線は実際には表示されません。

入力例1

{{columns-list|25em|
* [[ジョージ・ワシントン]]
* [[ジョン・アダムズ]]
* [[トーマス・ジェファーソン]]
* [[ジェームズ・マディソン]]
* [[ジェームズ・モンロー]]
}}

表示例1

入力例2

{{columns-list|25em|style=font-style:italic;|plainlist=1|
* [[ジョージ・ワシントン]]
* [[ジョン・アダムズ]]
* [[トーマス・ジェファーソン]]
* [[ジェームズ・マディソン]]
* [[ジェームズ・モンロー]]
}}

表示例2

応用例

以下のように、{{ul}}などと組み合わせることで、リストの一部のみを段組み化することも可能です。

入力例

{{ul
 |アメリカ大統領{{columns-list|25em|
* [[ジョージ・ワシントン]]
* [[ジョン・アダムズ]]
* [[トーマス・ジェファーソン]]
* [[ジェームズ・マディソン]]
* [[ジェームズ・モンロー]]
* ……
 }}
 |イギリス首相{{columns-list|25em|
* ……
 }}
}}

表示例

アメリカ大統領
イギリス首相
- ……

テンプレートデータ

これはビジュアルエディターやテンプレートウィザードにより使用されるテンプレートのためのTemplateData文書です。

Columns-list

箇条書きを段組み化するテンプレート。

テンプレートパラメーター[テンプレートデータを編集]
パラメーター		説明	型	状態
列幅	`1` `colwidth` `col-width` `column-width`	段組の各列の幅例 30em	行	必須
コンテンツ	`2` `content`	箇条書き	内容	必須
ビュレットなし	`plainlist`	説明なし	ブール値	省略可能
Small	`small`	フォント・サイズを90%にする（モバイル版等を除く）	ブール値	省略可能
段間罫	`rules`	説明なし例 1px dashed #888	行	省略可能
隙間	`gap`	各列間の空白例 3em	行	省略可能
Style	`style`	任意のCSS 例 font-family: serif;	行	省略可能

カテゴリー

現在非推奨となっている引数指定を行っているページを以下の隠しカテゴリーに分類します。

注釈

^
以下のような書き方は問題ありません。
```
* ほげ
*# foo
*# bar
*# baz
* ふが
* ぴよ
```
^ 「mw:Extension:MobileFrontend/ja」を参照。
^ この現象はデスクトップ版のベクター外装などで発生します。
^ 「Template‐ノート:Columns-list#1: margin-top関連」を参照。

外部リンク

この解説は、Template:Columns-list/docから呼び出されています。
編集者は、このテンプレートをサンドボックスとテストケースで試すことができます。（解説）
/docのサブページにカテゴリを追加してください。このテンプレートのサブページ一覧。

[1] 以下のような書き方は問題ありません。
* ほげ *# foo *# bar *# baz * ふが * ぴよ

[2] 「mw:Extension:MobileFrontend/ja」を参照。

[3] この現象はデスクトップ版のベクター外装などで発生します。

[4] 「Template‐ノート:Columns-list#1: margin-top関連」を参照。

[注 1]

[注 2]

[注 3]

[注 4]

テンプレート群	種類	最初	段組み分け	最後
"Col"	Table	{{Col-begin}} または{{Col-begin-small}}	{{Col-break}} {{Col-2}} .. {{Col-5}}	{{Col-end}}
"Columns"	Table	{{Columns}}	–	–
"Multicol"	Table	{{Multicol}}	{{Multicol-break}}	{{Multicol-end}}
"Col-float"	CSS float	{{Col-float}}	{{Col-float-break}}	{{Col-float-end}}
"Columns-start"	CSS float	{{Columns-start}}	{{Column}}	{{Columns-end}}
"Div col"	CSS columns	{{Div col}}	{{No col break}}（引数の内容を分割させない指定）	{{Div col end}}
"Columns-list"	CSS columns	{{Columns-list}}	–	–
"Flexbox"	CSS Flexbox（英語版）	{{Flexbox}}	{{Flex-item}} {{Flex-item start}} .. {{Flex-item end}}	–
"Flexbox start"	CSS Flexbox	{{Flexbox start}}	{{Flex-item}} {{Flex-item start}} .. {{Flex-item end}}	{{Flexbox end}}