Template:Div col

ブラウザの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

Breaks a list into columns. It automatically breaks each column to an equal space, so you do not manually have to find the half way point on two columns. The list is provided by |content= or closed with {{div col end}}.

テンプレートパラメーター[テンプレートデータを編集]
パラメーター		説明	型	状態
cols	`cols` `1`	Specifies the number of columns. 既定 2	数値	非推奨
colwidth	`colwidth` `2`	Specifies the width of columns, and determines dynamically the number of columns based on screen width; more columns will be shown on wider displays. This overrides the 'cols' setting.	文字列	省略可能
rules	`rules`	Produces vertical rules between the columns if set to yes.	文字列	省略可能
gap	`gap`	Specifies the space between the content of adjacent columns.	文字列	省略可能
style	`style`	Specifies any custom styling.	文字列	省略可能
content	`content`	Specifies the content.	文字列	省略可能

関連項目

段組みテンプレート

	：可能		：不可能

テンプレート群	種類	最初	段組み分け	最後
"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から呼び出されています。編集者は、このテンプレートをサンドボックスとテストケースで試すことができます。︵解説︶ /docのサブページにカテゴリを追加してください。このテンプレートのサブページ一覧。

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

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

[注 1

[注 2]