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

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}}		{{Flexbox end}}

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

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

注釈

外部リンク

• column-width - MDN Web Docs

この解説は、Template:Div col/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (編集 | 差分)とテストケース (編集)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。