可変段組みのテンプレート(Grid)

#designer(class="HubCategoryFrame"){[

#designer(){[
]}

#designer(){[
]}

#designer(){[
]}

]}

Grid段組みテンプレート

2段組みのテンプレート

#designer(style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;"){[

#designer(style=""){[
]}

#designer(style=""){[
]}

]}

3段組みのテンプレート

#designer(style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;"){[

#designer(style=""){[
]}

#designer(style=""){[
]}

#designer(style=""){[
]}

]}

4段組みのテンプレート

#designer(style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem;"){[

#designer(style=""){[
]}

#designer(style=""){[
]}

#designer(style=""){[
]}

#designer(style=""){[
]}

]}

Flex段組みテンプレート

2段組みのテンプレート

コード

#designer(style="display: flex;"){[

#designer(style="flex:1;border: none; padding:0 1rem 0 0;"){[
]}

#designer(style="flex:1;border: none; padding:0 1rem 0 0;"){[
]}

]}

#designer(style="display: flex;"){[

#designer(style="flex:1;border: 1px solid #0061c5;"){[
aaaaaaaaa
]}

#designer(style="flex:1;border: 1px solid #0061c5;"){[
bbbbbbbbbb
]}

]}

サンプル

3段組みのテンプレート

コード

#designer(style="display: flex;"){[

#designer(style="flex:1;border: none;"){[
]}

#designer(style="flex:1;border: none; padding:0 1rem 0 1rem;"){[
]}

#designer(style="flex:1;border: none;"){[
]}

]}

#designer(style="display: flex;"){[

#designer(style="flex:1;border: 1px solid #0061c5;"){[
aaaaaaaaa
]}

#designer(style="flex:1;border: 1px solid #0061c5;"){[
bbbbbbbbbb
]}

#designer(style="flex:1;border: 1px solid #0061c5;"){[
ccccccccc
]}

]}

サンプル

4段組みのテンプレート(Flex)

コード

#designer(style="display: flex;"){[

#designer(style="flex:1;border: none;"){[
]}

#designer(style="flex:1;border: none; padding:0 0.5rem 0 1rem;"){[
]}

#designer(style="flex:1;border: none; padding:0 1rem 0 0.5rem;"){[
]}

#designer(style="flex:1;border: none;"){[
]}

]}

#designer(style="display: flex;"){[

#designer(style="flex:1;border: 1px solid #0061c5;"){[
aaaaaaaaa
]}

#designer(style="flex:1;border: 1px solid #0061c5;"){[
bbbbbbbbbb
]}

#designer(style="flex:1;border: 1px solid #0061c5;"){[
ccccccccc
]}

#designer(style="flex:1;border: 1px solid #0061c5;"){[
ddddddddd
]}

]}

サンプル

表のテンプレート

|項目1|WIDTH(240px):項目2|項目3|h
||||
||||
|||ed|

項目1	項目2	項目3
		ed

表のテンプレート (MW版)

{|
!項目1
!style="width:280px"|項目2
!項目3
|-
|
|
|
|-
|
|
|
|-
|
|
|ed
|}

サンプル

項目1	項目2	項目3
		ed

表のテンプレート(色指定版)

カラーテーマが導入されたため、セルの色指定の利用はお勧めできません。

|BGCOLOR(#cceeff):項目1|BGCOLOR(#cceeff):WIDTH(240px):項目2|BGCOLOR(#cceeff):項目3|
||||
||||
|||ed|

項目1	項目2	項目3
		ed

表のテンプレート(MW ListTable 改行しない)

{| class="ListTable"
|+テーブルの見出し
!列名1!!列名2!!列名3
|-
|値 1-1||値 1-2||値 1-3
|-
|値 2-1||値 2-2||値 2-3
|}

テーブルの見出し

列名1	列名2	列名3
値 1-1	値 1-2	値 1-3
値 2-1	値 2-2	値 2-3

区切り線

点線

#designer(style="border-top:1px dashed #202020;"){[]}

#designer(style="border-top:1px dashed #202020;margin-top:16px;margin-bottom:32px;"){[]}

細かい点線

#designer(style="border-top:1px dotted #202020;"){[]}

太い点線

#designer(style="border-top:4px dotted #202020;"){[]}