利用者:新規作成/sandbox/tlcl/doc
 | これは利用者:新規作成/sandbox/tlclの解説サブページです。 使用方法、カテゴリ、およびその他テンプレート自体に含まれない情報を収容しています。 |
| プロパティ | 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の仕様によって、それ以降の記述が見ることができなくなってしまうので控えてください。
関連項目
[編集]段組みテンプレート
[編集] | これらのテンプレートに互換性はありません。例として、{{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を使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。