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

TemplateData

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

Div col end

{{div col}} で開始した複数列の一覧表を閉じます。パラメータの指定は不要。

テンプレートパラメーター[テンプレートデータを編集]

パラメーター		説明	型	状態
パラメーターが指定されていません

関連項目

段組みテンプレート

：可能

：不可能

テンプレート群	種類	ウィキテーブルコード の処理	レスポンシブ・デザイン モバイル対応	最初	段組み分け	最後
"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}}
"Flex columns"	CSS Flexbox			{{Flex columns}}	–	–

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

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

注釈

外部リンク

• column-width - MDN Web Docs

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