(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MJVMP2R'); モジュール | 名東紙工株式会社

モジュール

コーディングルール

README.md参照

カラーアセット

  • mainColor
  • subColor
  • bgColor
  • bgColor02
  • bgColor03
  • bdrColor
  • textColor
  • linkColor
  • error

ユーティリティクラス

※**は数字

※末尾に--pcをつけるとpcのみで有効

  • .u-mt** 上マージン 10px刻み 0~100px
  • .u-mr** 右マージン
  • .u-mb** 下マージン
  • .u-ml** 左マージン
  • .u-ma 中央寄せ
  • .u-pt** 上余白 10px刻み 0~100px
  • .u-pr** 右余白
  • .u-pb** 下余白
  • .u-pl** 左余白
  • .u-fs** フォントサイズ 1px刻み 10~30px
  • .u-fwn 細字
  • .u-fwb 太字
  • .u-tal 左寄せ
  • .u-tac 中央寄せ
  • .u-tar 右寄せ

ステート

.is-pc ブレイクポイント以上で表示

.is-sp ブレイクポイント未満で表示

.is-pc ブレイクポイント以上で表示

.is-sp ブレイクポイント未満で表示

.is-footer フッターのみで表示

.is-sp-header SP表示時のヘッダーのみで表示 PC表示時ヘッダ、フッターでは表示しない

.is-pc-header PC表示時のヘッダーのみで表示 SP表示時ヘッダ、フッターでは表示しない

テキスト装飾

.c-text-main-color mainColorのテキスト

.c-txt-tel 電話番号 000-000-0000(スマホのみリンク有効)

ボタン

.c-btn .c-btn--large .c-btn--back

テーブル

.c-table
th td
th td
.c-table--resp
th スマホ表示時にセルがblock表示になるテーブル
th td