Template:Columns-list

ナビゲーションに移動 検索に移動
テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]
ブラウザの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|colwidth=段組幅|
リストの項目
}}

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

段組み数の指定[編集]

段組の数を指定することもできますが、非推奨です。段組幅と両方指定した場合、段組数の指定は無視されます。

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

使用例[編集]

入力例

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

表示例


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

実行例

入力例
 {{columns-list|2;width:400px;font-style:italic|
  * [[ニューヨーク、アイラブユー]]
  * [[包帯クラブ]]
  * [[市川崑物語]]
  * [[虹の女神]]
  * [[花とアリス]]
  * [[リリイ・シュシュのすべて]]
  * [[四月物語]]
  * [[スワロウテイル]]
  * [[PiCNiC]]
  * [[FRIED DRAGON FISH]]
 }}
実行結果
注意
このテンプレートに限ったことではありませんが、widthを設定するとそれよりも幅の小さな端末ではmw:Extension:MobileFrontendの仕様によって、それ以降の記述が見ることができなくなってしまうので控えてください。

関連項目[編集]

段組みテンプレート[編集]

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 Yes Yes {{Columns-list}}

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