利用者:新規作成/sandbox/tlcl

解説[表示] [編集] [履歴] [キャッシュを破棄]

ブラウザの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)

リストなどを段組みで表示するテンプレートです。Mozilla FirefoxなどのGecko使用ブラウザなどCSS3に対応したブラウザで表示できます。

使い方

{{columns-list|段組み数|
リストの項目
}}

もしくは、各段組の幅を下のように指定することができます。

{{columns-list|colwidth=段組幅|
リストの項目
}}

このように、段組の幅を指定すると画面幅に応じて、幅の広い画面では多くの段組で表示するなど、動的に段組数を決めることができます。この場合、段組数の指定は無視されます。

使用例

入力例

{{Columns-list|colwidth=20em|
  * [[ジョージ・ワシントン]]
  * [[ジョン・アダムズ]]
  * [[トーマス・ジェファーソン]]
  * [[ジェームズ・マディソン]]
  * [[ジェームズ・モンロー]]
 }}

表示例

CSSの属性を追加するには段組み数の後に「;」で区切って記述します。

実行例

入力例

 {{Columns-list|colwidth=20em|style=width: 400px; font-style: italic;|
 * ニューヨーク、アイラブユー
 * 包帯クラブ
 * 市川崑物語
 * 虹の女神
 * 花とアリス
 * リリイ・シュシュのすべて
 * 四月物語
 * スワロウテイル
 * PiCNiC
 * FRIED DRAGON FISH
}}</nowiki>

実行結果

注意: このテンプレートに限ったことではありませんが、widthを設定するとそれよりも幅の小さな端末ではmw:Extension:MobileFrontendの仕様によって、それ以降の記述が見ることができなくなってしまうので控えてください。

関連項目

段組みテンプレート

	：可能		：不可能

テンプレート群	種類	最初	段組み分け	最後
"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}}	{{Flex-item}} {{Flex-item start}} .. {{Flex-item end}}	{{Flexbox end}}

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

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

この解説は、利用者:新規作成/sandbox/tlcl/docから呼び出されています。
編集者は、このテンプレートをサンドボックスとテストケースで試すことができます。（解説）
/docのサブページにカテゴリを追加してください。このページのサブページ一覧。