これはTemplate:Columns-listの解説サブページです。 使用方法、カテゴリ、およびその他テンプレート自体に含まれない情報を収容しています。

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

このテンプレートはテンプレートスタイルを使用しています: Template:Columns-list/styles.css

リストを段組みで表示するためのテンプレートです。リスト以外を含む内容を段組みで表示する場合には((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プロパティを指定することができます。

このテンプレートに限ったことではありませんが、|style=引数にwidthプロパティを指定すると、それよりも幅の小さな端末ではモバイル・ビューの仕様[注 2]によりそれ以降の記述が見ることができなくなってしまうので、控えてください。

本テンプレートには、<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|
* ……
 ))
))

表示例

• アメリカ大統領
  • ジョージ・ワシントン
  • ジョン・アダムズ
  • トーマス・ジェファーソン
  • ジェームズ・マディソン
  • ジェームズ・モンロー
  • ……
• イギリス首相
  • ……

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

• Category:Columns-list/第1引数に追加スタイルが指定されている記事
• Category:Columns-list/列幅が指定されていない記事

これらのテンプレートに互換性はありません。例として、((Multicol))に((Multicol-end))ではなく((col-end))を併用すると、HTMLの "div" (division) が閉じられず、以降の表示に不具合が発生します。

：可能

：不可能

テンプレート群	種類	ウィキテーブルコード の処理	レスポンシブ・デザイン モバイル対応	最初	段組み分け	最後
"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))		((Flexbox end))

ウィキマークアップ(Help:ページの編集#マークアップ（英語版）) ({| | || |- |}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、(((!)), ((!)), ((!!)), ((!-)), ((!)))などの要素、または、HTMLタグ (<table>...</table>, <tr>...</tr>など) を使用する必要があります。

Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

• column-width - MDN Web Docs
• column-rule - MDN Web Docs
• column-gap - MDN Web Docs