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)

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

使い方

列幅/列数の指定

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

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

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

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

表示内容の指定

第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

説明なし

ブール値省略可能
Smallsmall

フォント・サイズを90%にする(モバイル版等を除く)

ブール値省略可能
段間罫rules

説明なし

1px dashed #888
省略可能
隙間gap

各列間の空白

3em
省略可能
Stylestyle

任意のCSS

font-family: serif;
省略可能

カテゴリー

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

注釈

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

関連項目

段組みテンプレート

Yes :可能 No :不可能
テンプレート群 種類
ウィキテーブルコード
の処理dagger
レスポンシブ・デザイン
モバイル対応
最初 段組み分け 最後
"Col" Table Yes No {{Col-begin}}
または{{Col-begin-small}}
{{Col-break}}
{{Col-2}} .. {{Col-5}}
{{Col-end}}
"Columns" Table No No {{Columns}}
"Multicol" Table Yes Yes {{Multicol}} {{Multicol-break}} {{Multicol-end}}
"Col-float" CSS float Yes Yes {{Col-float}} {{Col-float-break}} {{Col-float-end}}
"Columns-start" CSS float Yes Yes {{Columns-start}} {{Column}} {{Columns-end}}
"Div col" CSS columns Yes Yes {{Div col}} {{No col break}} {{Div col end}}
"Columns-list" CSS columns No Yes {{Columns-list}}
"Flexbox"double-dagger CSS Flexbox No Yes {{Flexbox}} {{Flex-item}}
{{Flex-item start}} .. {{Flex-item end}}
"Flexbox start"double-dagger CSS Flexbox Yes Yes {{Flexbox start}} {{Flexbox end}}
dagger ウィキマークアップ(en:Help:Wiki markup) ({| | || |- |}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>, <tr>...</tr>など) を使用する必要があります。
double-dagger Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

外部リンク