本文へ移動
リファレンス
TEXT
| 属性名 |
用途 |
値 |
.text-xs | 極小文字 | 12px |
|---|
.text-2sm | 小文字 | 13px |
|---|
.text-sm | 小文字 | 14px |
|---|
.text-base | 基本文字 | 16px |
|---|
.text-lg | 大文字 | 18px |
|---|
.text-xl | 見出し文字 | 20px |
|---|
.text-2xl | 大見出し | 24px |
|---|
.text-3xl | 特大見出し | 30px |
|---|
.text-4xl | メイン見出し | 36px |
|---|
.text-5xl | 大型タイトル | 48px |
|---|
.font-normal | 通常ウェイト | 400 |
|---|
.font-medium | 中ウェイト | 500 |
|---|
.font-semibold | 太字 | 600 |
|---|
.font-bold | 強調太字 | 700 |
|---|
.text-left | 左揃え | text-align:left |
|---|
.text-center | 中央揃え | text-align:center |
|---|
.text-right | 右揃え | text-align:right |
|---|
COLOR
テキスト
| 属性名 |
用途 |
値 |
.attention | 注意色 | $caution |
|---|
.key-color | メインカラー | $key |
|---|
.sub-color | サブカラー | $sub |
|---|
背景
| 属性名 |
用途 |
値 |
.bg-key | メイン | $color-key |
|---|
.bg-sub | サブ | $color-sub |
|---|
.bg-point | ポイント | $color-point |
|---|
.bg-color | 色 | $color-bg |
|---|
.bg-hiligh | 強調 | $color-highlight |
|---|
.bg-active | アクティブ | $color-active |
|---|
.bg-black | 黒 | $color-black |
|---|
.bg-text | 文字 | $color-text |
|---|
.bg-gray-dark | 濃グレー | $color-gray-dark |
|---|
.bg-gray | グレー | $color-gray |
|---|
.bg-gray-bright | 薄グレー | $color-gray-bright |
|---|
.bg-white | 白 | $color-white |
|---|
.bg-btn | ボタン | $color-button |
|---|
.bg-btn-dark | 濃ボタン | $color-button-dark |
|---|
.bg-btn-bright | 明ボタン | $color-button-bright |
|---|
.bg-link | リンク | $color-link |
|---|
.bg-link-hover | リンクhover | $color-link-hover |
|---|
.bg-caution | 警告 | $color-caution |
|---|
.bg-caution-hiligh | 警告強調 | caution-highlight |
|---|
.bg-element-dark | 要素 | element-dark |
|---|
下線
| 属性名 |
用途 |
値 |
.underline | グレー | $color-gray |
|---|
.underline-dark | ダークグレー | $color-gray-dark |
|---|
FLOAT
| 属性名 |
用途 |
値 |
.float-left | 左寄せ | float:left |
|---|
.float-right | 右寄せ | float:right |
|---|
.float-none | float解除 | float:none |
|---|
.f-center | 中央配置 | margin:auto |
|---|
.cf | clearfix | clear float |
|---|
WIDTH
| 属性名 |
用途 |
値 |
.w-auto | 自動幅 | auto |
|---|
.w-1-2 | 50% | 49% |
|---|
.w-1-3 | 33% | 32% |
|---|
.w-2-3 | 66% | 66.666667% |
|---|
.w-1-4 | 25% | 25% |
|---|
.w-2-4 | 50% | 50% |
|---|
.w-3-4 | 75% | 75% |
|---|
.w-full | 100% | 100% |
|---|
.w-15 | 15% | 15% |
|---|
.base-wide | 基準幅 | $baseWidth |
|---|
MARGIN
| 属性名 |
用途 |
値 |
.m-0 | 解除 | 0 |
|---|
.mb-2 | 下：最小 | 8px |
|---|
.mb-3 | 下 | 12px |
|---|
.mb-4 | 下：小 | 16px |
|---|
.mb-8 | 下：基準 | 32px |
|---|
.mb-12 | 下：大 | 48px |
|---|
.mb-16 | 下：最大 | 64px |
|---|
.ml-2 | 左：最小 | 8px |
|---|
.ml-4 | 左：小 | 16px |
|---|
.ml-8 | 左：基準 | 32px |
|---|
.ml-16 | 左：最大 | 64px |
|---|
.m-auto | 中央配置 | auto |
|---|
.mb-auto | 下 | auto |
|---|
.ml-auto | 左 | auto |
|---|
.my-auto | 上下 | auto |
|---|
.mx-auto | 左右 | auto |
|---|
PADDING
| 属性名 |
用途 |
値 |
.p-0 | padding解除 | 0 |
|---|
.p-2 | padding | 8px |
|---|
.p-4 | padding | 16px |
|---|
.pb-2 | 下padding | 8px |
|---|
.pb-4 | 下padding | 16px |
|---|
.pb-8 | 下padding | 32px |
|---|
.pl-0 | 左padding解除 | 0 |
|---|
.pl-2 | 左padding | 8px |
|---|
.pl-4 | 左padding | 16px |
|---|
.pl-8 | 左padding | 32px |
|---|
.pt-8 | 上padding | 32px |
|---|
.px-0 | 左右padding解除 | 0 |
|---|
.px-2 | 左右padding | 8px |
|---|
.px-4 | 左右padding | 16px |
|---|
.py-0 | 上下padding解除 | 0 |
|---|
.py-2 | 上下padding | 8px |
|---|
.py-4 | 上下padding | 16px |
|---|
DISPLAY
| 属性名 |
用途 |
値 |
.d-block | block化 | display:block |
|---|
.inline-block | inline-block化 | display:inline-block |
|---|
.inline | inline化 | display:inline |
|---|
.d-none | 非表示 | display:none |
|---|
.pc-d-none | PC非表示 | display:none |
|---|
.tb-d-none | Tablet非表示 | display:none |
|---|
.sp-d-none | SP非表示 | display:none |
|---|
.tb-d-block | Tablet block表示 | display:block |
|---|
.sp-d-block | SP block表示 | display:block |
|---|
.tb-d-inlineblock | Tablet inline-block表示 | display:inline-block |
|---|
.sp-d-inlineblock | SP inline-block表示 | display:inline-block |
|---|
.radius | 角丸 | border-radius |
|---|