iPentec.com  /  Document  /  カテゴリ: Manual  /  タグ:  整形ルール テンプレート

目次

iPentec Document 整形テンプレート

目次

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

4段組みのテンプレート

#columns(cols="4", gap="1rem"){[

#col{[
]}

#col{[
]}

#col{[
]}

#col{[
]}

]}

3段組みのテンプレート

#columns(cols="3", gap="1rem"){[

#col{[
]}

#col{[
]}

#col{[
]}

]}

2段組みのテンプレート

#columns(cols="2", gap="1rem"){[

#col{[
]}

#col{[
]}

]}

可変段組みのテンプレート(Grid) : Hubページ用

枠線なし
#designer(class="HubCategoryFrame"){[

#designer(){[
]}

#designer(){[
]}

#designer(){[
]}

]}

表のテンプレート

|項目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;"){[]}


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=""){[
]}

]}

5段組みのテンプレート

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

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

#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
]}

]}

サンプル

aaaaaaaaa
bbbbbbbbbb
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
]}

]}

サンプル

aaaaaaaaa
bbbbbbbbbb
ccccccccc
ddddddddd
AuthorPortraitAlt
著者
iPentec Document 編集部
iPentec Document 編集部です。
快適な生活のための情報、価値のある体験やレビューを提供します。
作成日: 2011-08-07