• TOP
  • 取扱商品について

取扱商品について

【見出し】

＜h2＞見出し

＜h3＞見出し

＜h4＞見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

【テーブル】

ラベル ラベル
ラベル データ
ラベル データデータデータデータデータデータデータ
ラベル データ

【リンク・ボタン】

テキストリンク

外部リンク

ボタン：btn-primary

ボタン：btn-secondary

【カラー・ウエイト】

  • 赤：fc--red
  • 黒：fc--black
  • グレー：fc--gray
  • 青：fc--blue
  • オレンジ：fc--orange

太字：fw--bold

【寄せ】

共通 PC SP
  • align--c
  • align--r
  • align--l
 pc-align--xxx sp-align--xxx

【フォントサイズ】

PC SP
  • fs--10 〜 fs--24
  • fs--28
  • fs--32
  • fs--36
  • fs--40
  • sp-fs--10 〜 sp-fs--24
  • sp-fs--28
  • sp-fs--32
  • sp-fs--36
  • sp-fs--40

【リスト】

  1. ドット付きリスト
  2. ドット付きリスト

  1. 数字付きリスト
  2. 数字付きリスト
  3. 数字付きリスト

【パディング】

共通 PC SP
padding
（基本）
  • p--0
  • p--4px
  • p--8px
  • p--10px
  • p--12px
  • p--16px
  • p--20px
  • p--24px
  • p--28px
  • p--32px
  • p--36px
  • p--40px
  • p--48px
  • p--56px
  • p--64px
  • p--72px
  • p--0-5em
  • p--1em
  • p--1-5em
  • p--2em
  • p--2-5em
  • p--3em
  • p--4em
  • p--5em
 sp-p--xx pc-p--xxx
padding-top pt--xx sp-pt--xx pc-pt--xxx
padding-right pr--xx sp-pr--xx pc-pr--xxx
padding-bottom pb--xx sp-pb--xx pc-pb--xxx
padding-left pl--xx sp-pl--xx pc-pl--xxx

【マージン】

共通 PC SP
margin:auto
  • m--a（margin:auto）
  • mt--a（margin-top:auto）
  • mr--a
  • mb--a
  • ml--a
 sp-m--xx pc-m--xxx
margin-top
（基本）
  • mt--0
  • mt--4px
  • mt--8px
  • mt--10px
  • mt--12px
  • mt--16px
  • mt--20px
  • mt--24px
  • mt--28px
  • mt--32px
  • mt--36px
  • mt--40px
  • mt--48px
  • mt--56px
  • mt--64px
  • mt--72px
  • mt--0-5em
  • mt--1em
  • mt--1-5em
  • mt--2em
  • mt--2-5em
  • mt--3em
  • mt--4em
  • mt--5em
 sp-mt--xx pc-mt--xxx
margin-right mr--xx sp-mr--xx pc-mr--xxx
margin-bottom mb--xx sp-mb--xx pc-mb--xxx
margin-left ml--xx sp-ml--xx pc-ml--xxx

【幅】

共通 PC SP
  • width--a（width: auto）
  • width--40px
  • width--60px
  • width--80px
  • width--100px
  • width--120px
  • width--160px
  • width--180px
  • width--200px
  • width--240px
  • width--320px
  • width--400px
  • width--480px
  • width--560px
  • width--640px
  • width--720px
  • width--10p
  • width--20p
  • width--25p
  • width--30p
  • width--33p
  • width--40p
  • width--50p
  • width--60p
  • width--70p
  • width--75p
  • width--80p
  • width--90p
  • width--100p
  • width--1em
  • width--2em
  • width--3em
  • width--4em
  • width--5em
 pc-width--xx sp-width--xx

【フレックス・カラム】

共通 PC SP
フレックスボックス flex pc-flex sp-flex
折り返し：あり flex--wrap pc-flex--wrap sp-flex--wrap
折り返し：なし flex--nowrap pc-flex--nowrap sp-flex--nowrap
1カラム -
  • pc-col1
  • pc-col2
  • pc-col3
  • pc-col4
  • sp-col1
  • sp-col2
  • sp-col3
  • sp-col4

※フレックスボックスの細かい設定はFTPにログインし、snippet.cssをご確認ください。

【回り込み】

共通 PC SP
img-float--r
img-float--l
 pc-img-float--xxx sp-img-float--xxx
解除はclearfix