Template:Div col end
表示
プロパティ | 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
に起因したレイアウト崩れ[注 1]への対策[注 2]がなされていますが、本テンプレートには同様の対策は行われていません。
TemplateData
Ends a multi-column list started by {{div col}}. It takes no parameters.
パラメーター | 説明 | 型 | 状態 | |||
---|---|---|---|---|---|---|
パラメーターが指定されていません |
関連項目
段組みテンプレート
これらのテンプレートに互換性はありません。例として、{{Multicol}}に{{Multicol-end}}ではなく{{col-end}}を併用すると、HTMLの "div" (division) が閉じられず、以降の表示に不具合が発生します。 |
:可能 | :不可能 |
テンプレート群 | 種類 | ウィキテーブルコード
の処理 |
レスポンシブ・デザイン モバイル対応 |
最初 | 段組み分け | 最後 |
---|---|---|---|---|---|---|
"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関連」を参照。