Template:Columns-list
| プロパティ | Edge | Firefox | Safari | Chrome | Opera |
|---|---|---|---|---|---|
| column-width column-count |
≥ 12 (2015) | ≥ 1.5 (2005) | ≥ 3 (2007) | ≥ 1 (2008) | ≥ 11.1 (2011) |
| columns | ≥ 12 (2015) | ≥ 9 (2011) | ≥ 3 (2007) | ≥ 1 (2008) | ≥ 11.1 (2011) |
| break-before break-after break-inside |
≥ 12 (2015) | ≥ 65 (2019) | ≥ 10 (2016) | ≥ 50 (2016) | ≥ 37 (2016) |
 | Luaモジュールを使用しています: |
 | このテンプレートはテンプレートスタイルを使用しています: |
リストを段組みで表示するためのテンプレートです。リスト以外を含む内容を段組みで表示する場合には{{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]によりそれ以降の記述が見ることができなくなってしまうので、控えてください。 |
{{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| * …… }} }}
- 表示例
- アメリカ大統領
- イギリス首相
- ……
以下のように、{{Dl2}}と組み合わせた場合。
- 入力例
{{Columns-list|20em|small=1| {{Dl2 | [[畠山美由紀]] | * 罌粟（作曲：[[冨田恵一]]） | [[畑中葉子]] | * ロミオ&ジュリエット'79 （作曲：[[平尾昌晃]]） * テキーラ（作曲：平尾昌晃） }} }}
- 表示例
テンプレートデータ
箇条書きを段組み化するテンプレート。
| パラメーター | 説明 | 型 | 状態 | |
|---|---|---|---|---|
| 列幅 | 1 colwidth col-width column-width | 段組の各列の幅
| 短いテキスト | 必須 |
| コンテンツ | 2 content | 箇条書き | 内容 | 必須 |
| ビュレットなし | plainlist | 説明なし | ブール値 | 省略可能 |
| Small | small | フォント・サイズを90%にする（モバイル版等を除く） | ブール値 | 省略可能 |
| 段間罫 | rules | 説明なし
| 短いテキスト | 省略可能 |
| 隙間 | gap | 各列間の空白
| 短いテキスト | 省略可能 |
| Style | style | 任意のCSS
| 短いテキスト | 省略可能 |
カテゴリー
現在非推奨となっている引数指定を行っているページを以下の隠しカテゴリーに分類します。
注釈
- ↑ 以下のような書き方は問題ありません。
* ほげ *# foo *# bar *# baz * ふが * ぴよ
- ↑ 「mw:Extension:MobileFrontend/ja」を参照。
- ↑ この現象はデスクトップ版のベクター外装などで発生します。
- ↑ 「Template‐ノート:Columns-list#1: margin-top関連」を参照。
関連項目
段組みテンプレート
| これらのテンプレートに互換性はありません。例として、{{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}} | |
| "Flex columns"
| CSS Flexbox |
|
| {{Flex columns}} | – | – |
- ウィキマークアップ(Help:ページの編集#マークアップ) (
{|||||-|}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>,<tr>...</tr>など) を使用する必要があります。 - Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。
