共通デザイン

h2見出しの共通デザインです

h3見出しの共通デザインです

h4見出しの共通デザインです

h5見出しの共通デザインです

カラム調整用クラス

カラム化する場合は下記クラスをdiv class="flex"で更に囲ってください。

2カラム txt-2box

3カラム　txt-3box

4カラム txt-4box

5カラム txt-5box

テキスト調整

色変更

ピンク txt-pink

青 txt-blue

オレンジ look-orange

赤 look-red

フォントサイズ調整

フォントサイズ85% txt-85

フォントサイズ90% txt-90

フォントサイズ95% txt-95

フォントサイズ110% txt-110

フォントサイズ120% txt-120

フォントサイズ150% txt-150

フォント位置調整

左揃え txt-left
デフォルト左揃えですが、中央揃えや右揃えがかかっている項目内で左揃えをする場合などに重宝します

中央揃え txt-center

右揃え txt-right

フォント太字

太字 bold

中央揃え normal

リンク装飾

ページ用バナー作成

flex内に4カラムを指定して入れた状態でaタグにcontents-link-bnrを指定 任意の画像(265×180)を配置し、pタグにbnr-txtを指定。

アンカーリンク

アンカーリンクのaタグにcontents-anchor-btnを追加 後は作成するカラム数に合わせてflexとカラムクラスを適用

PDF用バナー

PDF用バナー

表デザイン

通常フォーマット SP時1カラムになるタイプ table-01

項目名	項目テキスト

通常フォーマット SP時カラム維持するタイプ table-02

項目名	項目テキスト

スマホ時、表を横スクロールさせる tableに対してdiv class="table-over"を指定

余白用クラス

no-mt、no-mb以外はpタグに直接は効かないので、divやspanに対して適用する必要有

上余白無し no-mt

下余白無し no-mb

コンテンツ装飾

流れ用レイアウト

大きい流れ

スタッフ用レイアウト

顔写真有り

顔写真無し