コンポーネント参照ページ

こちらにセクションのタイトルが入ります

それではページを作成しましょう。まずはセクションボックスを配置して、「sectionタグ」から「/sectionの閉じタグ」の中に要素を入れ込んでいく必要があります。基本的に各章ごとにセクションボックスを設けて、セクションは大見出し「h2 head02タグ」から始まるのが望ましいです。
改行が必要な場合は「brタグ」を使用してください。
このように改行できます。

見出しのデザインh2 class="head02"

見出しのデザインh3 class="head03"

見出しのデザインh3 class="head03_o"

見出しのデザインh4 class="head04"

見出しのデザインh5 class="head05"

見出しのデザインh6 class="head06"

段落テキストについて

段落テキストはすべてpタグで記載します。class名のbtm15は下に余白15pxです。
btm0からbtm95まで5刻みで調整可能です。

横位置調整

通常は左寄せ

中央寄せ

右寄せ

カラー装飾

<p class="bold">すべて太字の文章すべて太字の文章すべて太字の文章すべて太字の文章</p>

<p class="red">すべて赤字の文章すべて赤字の文章すべて赤字の文章すべて赤字の文章</p>

<p class="blue">すべて青字の文章すべて青字の文章すべて青字の文章すべて青字の文章</p>

<p class="orange">すべてオレンジの文章すべてオレンジの文章すべてオレンジの文章</p>

部分的に太字にしたい場合は<span class="bold">太字のサンプル</span>

部分的に赤字にしたい場合は<span class="red">赤字のサンプル</span>

部分的に赤太字にしたい場合は<span class="red bold">赤太字のサンプル</span>

部分的に青字にしたい場合は<span class="blue">青字のサンプル</span>

部分的に青太字にしたい場合は <span class="blue bold">青太字のサンプル</span>

部分的にオレンジにしたい場合は <span class="blue bold">オレンジのサンプル</span>

部分的にオレンジ太字にしたい場合は <span class="blue bold">オレンジ太字のサンプル</span>

余白調整

下に20pxの余白をつけたい場合は<p class="btm20">テキストテキスト</p>

下に45pxの余白をつけたい場合は<p class="btm45">テキストテキスト</p>
btm0からbtm95まで5刻みで調整可能です

サイズ調整

フォントサイズを13pxにしたい場合は<p class="size13">テキストテキスト</p>

フォントサイズを25pxにしたい場合は<p class="size25">テキストテキスト</p>
size10からsize30まで調整可能です

リストのデザイン

• インデントのリストですインデントのリストです class="discList"
  このように改行しても揃います
• インデントのリストですインデントのリストです
• インデントのリストですインデントのリストです

• インデントのリストです小さい文字の場合は class="discListS"
  このように改行しても揃います
• インデントのリストですインデントのリストです
• インデントのリストですインデントのリストです

• ・インデントのリストですインデントのリストです class="indList"
  このように改行しても揃います
• ・インデントのリストですインデントのリストです
• ・インデントのリストですインデントのリストです

• ※インデントのリストです。米印にしてもOKです class="indList"
• ※インデントのリストです。米印にしてもOKです
• ※インデントのリストです。米印にしてもOKです

• ・インデントのリストです。小さい文字の場合は class="indListS"
• ・インデントのリストですインデントのリストです
• ・インデントのリストですインデントのリストです
• ・インデントのリストですインデントのリストです

1. 番号付きのリストです class="numList"
   このように改行しても揃います
2. 番号付きのリストです番号付きのリストです
3. 番号付きのリストです番号付きのリストです

1. 番号付きのリストです 小さい文字の場合は class="numListS"
   このように改行しても揃います
2. 番号付きのリストです番号付きのリストです
3. 番号付きのリストです番号付きのリストです

ボタン・リンクのデザイン

左寄せ

• ベーシックなボタン
• オレンジボタン class="orange"
• グリーンボタン class="green"
• アテンション class="red"
• PDFリンクボタン class="pdf"
• ドキュメント・外部リンクボタン

中央揃え

• 戻るボタン class="prev"
• 進むボタン class="next"

ベーシックなテキストリンクのパターン

• ベーシックなテキストリンクのパターン 複数入る場合はリストで
• 令和2年度 正味財産増減計算書
• 令和2年度 正味財産増減計算書
• 令和2年度 正味財産増減計算書

レイアウト用パーツ

画像=テキスト

縦位置は上に調整されています

大阪食品衛生協会は、食品関係業界団体並びに法人等を会員として組織されています。公衆衛生の向上と府民の健康増進に寄与するため、食品関係事業者への食品衛生管理の指導並びに消費者への食品衛生知識の向上のための普及啓発を行っています。大阪食品衛生協会は、食品関係業界団体並びに法人等を会員として組織されています。公衆衛生の向上と府民の健康増進に寄与するため、食品関係事業者への食品衛生管理の指導並びに消費者への食品衛生知識の向上のための普及啓発を行っています。

テキスト=画像

縦位置は中央に調整されています class="aiCenter"

幅の設定は「w70=70%」「w25=25%」で調整されています。5刻みで調整可能です。

テキスト=テキスト

テキスト×3

画像=画像

画像×3

テーブルのデザイン

テーブル（color01）

テーブル（color02）

テーブル（color03）

テーブル（その他装飾パターン）

headThで見出し個別指定

tblS 余白や文字サイズが小さいパターン

スマホ状態変更 tblResponsiveでレスポンシブ表示

ボックスのデザイン

ボックス（インフォ）

ボックス（シンプル）

ボックス（ビデオ）