Template:Div col/doc

ブラウザの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に起因したレイアウト崩れへの対策がなされていますが、本テンプレートには同様の対策は行われていません。

TemplateData

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

Div col

リストを列に分割します。各列の幅は自動的に均等になるため、2つの列の中間点を手動で探す必要はありません。パラメータ 「|content=」を使うと一覧表を開始、{{div col end}} で終了します。

テンプレートパラメーター

パラメーター		説明	型	状態
cols	cols 1	列の数を指定。 既定 2	数値	非推奨
colwidth	colwidth 2	「cols」の設定を上書きします。列の幅を指定し、画面の幅に基づいて列の数を動的に決定します。画面の幅が広いほど、より多くの列が表示されます。	文字列	省略可能
rules	rules	yes に設定すると、列間に垂直線を引きます。	文字列	省略可能
gap	gap	隣接する列の間隔を指定。	文字列	省略可能
style	style	カスタムの書式を指定。	文字列	省略可能
content	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}}		{{Flexbox end}}

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

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

外部リンク

• column-width - MDN Web Docs