見出し等確認用

フォントの指定

部分的にフォントを変えたい場合、以下のクラスをお使いください。

英語フォント futura

英語フォント（少し太め） futura-m

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

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

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

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

カラム調整用クラス

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

2カラム txt-2box

2カラムのクラスです。SP時は1カラムです。2カラムのクラスです。SP時は1カラムです。

3カラム txt-3box

3カラムのクラスです。SP時は1カラムです。3カラムのクラスです。SP時は1カラムです。3カラムのクラスです。SP時は1カラムです。

3カラムのクラスです。SP時は1カラムです。3個目の要素にはクラスにendを付けてください。

4カラム txt-4box

4カラムのクラスです。SP時は1カラムです。4個目の要素にendをつけてください。4カラムのクラスです。SP時は1カラムです。4カラムのクラスです。SP時は1カラムです。4カラムのクラスです。SP時は1カラムです。

4カラムのクラスです。SP時は1カラムです。4カラムのクラスです。SP時は1カラムです。4カラムのクラスです。SP時は1カラムです。4カラムのクラスです。SP時は1カラムです。

5カラム txt-5box

5カラムのクラスです。SP時は1カラムです。5個目の要素にendを付けてください。

5カラムのクラスです。SP時は1カラムです。

テキスト調整

色変更

オレンジ look-orange

緑 look-green

赤 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

表デザイン

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

項目名	項目テキスト

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

項目名	項目テキスト

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

項目名	項目テキスト

余白用クラス

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

上余白無し no-mt

下余白無し no-mb

下余白10px mb-10

下余白20px mb-20

下余白30px mb-30

下余白40px mb-40

検索引っ掛け用

RWD カラムテンプレートコピーレイアウト例複数人レスポンシブ HTML タグ