Template:Div col
| プロパティ | 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スタイル。
使用 例
{{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
技術 的 な詳細
このテンプレートは
- -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
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.
| ||
| 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を使用 するテンプレート同様 、複数 の画面 幅 に対応 したレイアウトに適 しています。
注釈
- ^ この
現象 はデスクトップ版 のベクター外装 などで発生 します。 - ^ 「Template‐ノート:Columns-list#1: margin-top
関連 」を参照 。