Template:Div col end

ブラウザの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}} は、{{div col end}} とともに用いて、リスト︵一覧︶を段組みで表示するテンプレートです。設定で小さなフォントサイズで表示できます。

使い方

引数

|cols= 列の数を指定します。既定値は2です。18em未満にはなりません。 |colwidth= 列の幅を指定します。cols を上書きします。px, em, % といった単位を付けます。 |small= yes と指定することで、フォントサイズを小さく (90%) します。 |rules= 列の間に垂直線を書きます。yes と指定するか、あるいは、︵1px dashed blue; のような︶CSSのスタイルを指定します。 |gap= 隣接した列の内容の間のスペースを指定します。︵ブラウザによって設定されている︶既定値は1emです。 |style= 列に適用するCSSスタイル。

使用例

何も指定しないと、2列か18emで幅が大きい方になります。

{{Div col}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

表示

a
b
c
d
e
f
g
h

cols= は省略できます。

{{Div col|3}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

表示

a
b
c
d
e
f
g
h

colwidth= は省略できます。第二引数であることに注意します。

{{Div col||10em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

表示

a
b
c
d
e
f
g
h

small=yes で文字サイズが小さくなります。

{{Div col|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

表示

a
b
c
d
e
f
g
h

rules の例

{{Div col|rules=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

表示

a
b
c
d
e
f
g
h

gap の例

{{Div col|colwidth=10em|rules=yes|gap=2em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

表示

a
b
c
d
e
f
g
h

技術的な詳細

このテンプレートは以下のCSSのプロパティに対応したブラウザでマルチカラムを作成します。

-moz-column-count（FirefoxなどのMozilla/Geckoを使用したブラウザ対応）
-webkit-column-count（SafariなどのWebKitを使用したブラウザ対応）
column-count（CSS3に対応しているブラウザ。CSS3 module: Multi-column layout参照）

{{Columns-list}}との相違点

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

TemplateData

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

Div col end

Ends a multi-column list started by {{div col}}. It takes no parameters.

テンプレートパラメーター[テンプレートデータを編集]
パラメーター		説明	型	状態
パラメーターが指定されていません

関連項目

段組みテンプレート

	：可能		：不可能

テンプレート群	種類	最初	段組み分け	最後
"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}}

ウィキマークアップ(Help:ページの編集#マークアップ︵英語版︶) ({| | || |- |}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>, <tr>...</tr>など) を使用する必要があります。 Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

注釈

^ この現象はデスクトップ版のベクター外装などで発生します。
^ 「Template‐ノート:Columns-list#1: margin-top関連」を参照。

外部リンク

column-width - MDN Web Docs

この解説は、Template:Div col/docから呼び出されています。
編集者は、このテンプレートをサンドボックスとテストケースで試すことができます。（解説）
このテンプレートのサブページ一覧。

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

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

[注 1]

[注 2]