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のプロパティに対応したブラウザでマルチカラムを作成します。

{Columns-list}との相違点

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

TemplateData

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

Div col

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

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

パラメーター説明型状態
colscols 1

列の数を指定。

既定
2
数値非推奨
colwidthcolwidth 2

「cols」の設定を上書きします。列の幅を指定し、画面の幅に基づいて列の数を動的に決定します。画面の幅が広いほど、より多くの列が表示されます。

文字列省略可能
rulesrules

yes に設定すると、列間に垂直線を引きます。

文字列省略可能
gapgap

隣接する列の間隔を指定。

文字列省略可能
stylestyle

カスタムの書式を指定。

文字列省略可能
contentcontent

内容を指定。

文字列省略可能

関連項目

段組みテンプレート

Yes ：可能 No ：不可能
テンプレート群 種類
ウィキテーブルコード
の処理dagger
 レスポンシブ・デザイン
モバイル対応 		最初 段組み分け 最後
"Col" Table Yes No {Col-begin}
または{Col-begin-small} 		{Col-break}
{Col-2} .. {Col-5} 		{Col-end}
"Columns" Table No No {Columns} – –
"Multicol" Table Yes Yes {Multicol} {Multicol-break} {Multicol-end}
"Col-float" CSS float Yes Yes {Col-float} {Col-float-break} {Col-float-end}
"Columns-start" CSS float Yes Yes {Columns-start} {Column} {Columns-end}
"Div col" CSS columns Yes Yes {Div col} {No col break}（引数の内容を分割させない指定） {Div col end}
"Columns-list" CSS columns No Yes {Columns-list} – –
"Flexbox"double-dagger CSS Flexbox（英語版） No Yes {Flexbox} {Flex-item}
{Flex-item start} .. {Flex-item end} 		–
"Flexbox start"double-dagger CSS Flexbox Yes Yes {Flexbox start} {Flexbox end}
dagger ウィキマークアップ(Help:ページの編集#マークアップ（英語版）) ({| | || |- |}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{(!}, {!}, {!!}, {!-}, {!)}などの要素、または、HTMLタグ (<table>...</table>, <tr>...</tr>など) を使用する必要があります。
double-dagger Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。

注釈

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

外部リンク

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