コンテンツにスキップ

Template:Col-float-end

テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

CSSのfloat要素で段組みを表示します。

HTML <table>と異なり、複数の環境に対応しており、並列に見せるために幅を小さくして折りたたみます。

パラメータ

[編集]

全て入力は任意で {{Col-float}} / {{Start col-float}}と、|firstcol=以外は{{Col-float-break}} / {{Break col-float}}で使用することができます。

  • firstcol (Col-floatやStartでのみ)
  • nextcol
  • width
次の段の幅(Col-float/Startでは最初の段の幅)。IE系ブラウザではwidthの指定は必須で規定値は30.0em。
class
CSSのクラスを使ってスタイルを指定
style
追加のCSSスタイル要素

{{Col-float}}は番号パラメータを使用することができる(例として|1=を最初の段に|2=を2番目の段というふうに)。ただし、2番目以降は<nowiki/>を指定して改行する必要がある。さらに表では{{!}}を使用する必要がある。

使用例

[編集]

{{Col-float-break}}を使用

[編集]
1段目
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
2段目
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
{{col-float}}
;1段目
* 1
* 2
* 3
* 4
* 5
* 6
* 7
{{col-float-break}}
;2段目
* 8
* 9
* 10
* 11
* 12
* 13
* 14
{{col-float-end}}

番号パラメータを使用

[編集]
1段目
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
2段目
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
{{col-float
|1=
;1段目
* 1
* 2
* 3
* 4
* 5
* 6
* 7
|2=<nowiki/>
;2段目
* 8
* 9
* 10
* 11
* 12
* 13
* 14
}}

関連項目

[編集]

段組みテンプレート

[編集]
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を使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。