Template:Flex columns
 | Luaモジュールを使用しています: |
左右2列のレイアウトを作るテンプレートです。主にポータルで使用します。左右の各コンテンツ（ボックスなど）は同じ高さに揃えられます。左右どちらかの文章量が少なく空白ができるとき、空白はその列の各ボックスに均等に割り振られます。
このレイアウトは、ウェブブラウザがCSSのFlexbox(英語版)をサポートしていることを前提に設計されています。サポートしていない場合、左右の高さが揃わないレイアウトになります。
画面が小さなモバイル端末などでは、1列のレイアウトに変わります。
使い方
[編集]{{Flex columns
|1 = (...左列のコンテンツ...)
|2 = (...右列のコンテンツ...)
}}
Only contents which are in <div>...</div> tags will have extra whitespace distributed to them – except for those with class flex-columns-noflex (or otherwise override the flex: property).
列の幅の比率を変更したいときは、 |flex1= と |flex2= を設定します。既定値は1です。例えば、
|flex1=3 |flex2=2とすると、左列は5分の3つまり60%、右列は5分の2で40%の幅になります。
ただし、各列の最小幅が360pxに設定されていて、画面サイズによっては異なる比率で表示される場合があるため注意してください。
サンプル
[編集]{{Flex columns|{{lorem ipsum|3}}|{{lorem ipsum|2}}}}
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.関連テンプレート
[編集]段組みテンプレート
[編集] | これらのテンプレートに互換性はありません。例として、{{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}} | |
| "Flex columns"
| CSS Flexbox |
|
| {{Flex columns}} | – | – |
ウィキマークアップ(Help:ページの編集#マークアップ) ({|||||-|}) を使った表作成の処理が出来るかどうか。処理が出来ない場合は、{{(!}}, {{!}}, {{!!}}, {{!-}}, {{!)}}などの要素、または、HTMLタグ (<table>...</table>,<tr>...</tr>など) を使用する必要があります。
Flexboxテンプレートは、セクションや図・表を左右に並べるといった段組み的な表示に使用することができます。CSS columnsを使用するテンプレート同様、複数の画面幅に対応したレイアウトに適しています。
ポータル用テンプレート
[編集]ポータルページの特集コンテンツ用
- {{Transclude random subpage}}—特集サブページをランダムに読み込む。ボックスなし。
- {{Random portal component}}—特集サブページをランダムに読み込む。ボックス付き。
- {{Random subpage}}—各種サブページをランダムに読み込む。ボックスなし。
- {{Numbered subpages}}—管理用。通し番号が振られたサブページを一覧表示し比較しやすくしたもの。
- {{Random item}}—コンテンツをランダムに読み込む。
ポータルページの特集サブページ用
ポータルページのレイアウト用
- {{Box portal skeleton}}—ポータル本体のレイアウト雛形
- {{Box-header}}—既定では長方形のボックス形式のヘッダ。文字・背景・線・余白のスタイル、編集リンクなどのレイアウト指定を行う。
- {{Box-header colour}}—配色を自動計算し、細かな指定が不要なヘッダ
- {{Box-header-round}}—ボックスの角が丸いヘッダ
- {{Box-header-watch}}—ウォッチリストへの追加アイコンをもつヘッダ
- {{Box-header-style1}}—タイトル左寄せのヘッダ
- {{Box-footer}}—ボックス形式のフッタ。Box-headerと必ずセットで使う。目次へのリンクを表示。
- {{ウィキポータルボックスヘッダ}} & {{ウィキポータルボックスフッタ}}—長方形のボックス形式のヘッダ&フッタ
- {{Portal:Box-header}} & {{Portal:Box-footer}}—（旧式）長方形のボックス形式のヘッダ&フッタ。Box-headerの古いCSSスタイルを使用。
- {{標準コラム}}—（旧式）ボックスの角が丸いヘッダで、アイコン使用にも対応
- {{影付コラム}}—（旧式）長方形で影付きのボックス形式のヘッダ
- {{コラム}}—（旧式）タイトル下方に色付き線を表示するシンプルな見た目のヘッダ
- {{Flex columns}}—左右2列のレイアウト用
関連ポータル等への案内リンク用
- {{ウィキポータルリンク}}（{{Portal}}）—右寄せボックス、任意画像または自動アイコン、背景水色または灰色—主に記事、カテゴリ用
- {{Portal box}}—右寄せボックス、アイコンなし、背景水色—主に記事、カテゴリ用
- {{Portal bar}}—横長全幅ボックス、自動アイコン、文字アイコンやや小さめ—主に記事、カテゴリ、ポータル用
- {{Portal-inline}}—左寄せボックスなし、文字アイコン小さめ表示にも対応—主に記事、テンプレート内表示用
- {{Related portals}}—左寄せボックス、自動アイコン、アイコンやや大きめ—主にポータル用
- {{Related portals2}}—左寄せボックス、自動アイコン、アイコン大きめ、2段表示—主にポータル用
- {{WikimediaForPortals}}—姉妹プロジェクトへの案内リンク
汎用
- {{Portals}}—ポータル制度の簡易案内
- {{Purge page}}—サーバーのキャッシュ破棄リンク