ボーダー設定
最初に【SWELL設定】＞【エディター設定】で使いやすいボーダーセットにしておくと、非常に便利。
オススメ設定は以下の通り。
| 番号 | style | width | color |
|---|---|---|---|
| 01 | solid | 1px | グレー |
| 02 | solid | 5px | グレー |
| 03 | double | 4px | グレー |
| 04 | dotted | 2px | グレー |
グレー ＝ var(--color_border)に該当
01 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
02 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
03 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
04 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
ボーダー色を変更したい
- is-boc-main
- is-boc-main-thin
- is-boc-border
- is-boc-gray
- is-boc-text
- is-boc-deep01
- is-boc-deep02
- is-boc-deep03
- is-boc-deep04
- is-boc-pale01
- is-boc-pale02
- is-boc-pale03
- is-boc-pale04
- is-boc-cc
- is-boc-white
- is-boc-black
- is-boc-red
SAMPLE
is-boc-main / あいうえお
is-boc-main-thin / あいうえお
is-boc-border / あいうえお
is-boc-gray / あいうえお
is-boc-text / あいうえお
is-boc-deep01 / あいうえお
is-boc-deep02 / あいうえお
is-boc-deep03 / あいうえお
is-boc-deep04 / あいうえお
is-boc-pale01 / あいうえお
is-boc-pale02 / あいうえお
is-boc-pale03 / あいうえお
is-boc-pale04 / あいうえお
is-boc-cc / あいうえお（cc=currentColor）
is-boc-white / あいうえお
is-boc-black / あいうえお
is-boc-red / あいうえお
余白を変更したい（PCのみ）
- is-pdg-sm … 余白1/2
- is-pdg-lg … 余白1.5倍
- is-pdg-xl … 余白2倍
SAMPLE
is-pdg-sm / あいうえお
デフォルト / あいうえお
is-pdg-lg / あいうえお
is-pdg-xl / あいうえお
文字サイズを変えたい
ブロックパネルで変更してもいいけど、既に設定されたCSSで指定した方が楽。
- u-fz-xs … -4px
- u-fz-s … -2px
- u-fz-def … デフォルトサイズ
- u-fz-m … +2px
- u-fz-l … +4px
- u-fz-xl … ×1.5
- u-fz-h1 … var(–h1-fz)
- u-fz-h2 … var(–h2-fz)
- u-fz-h3 … var(–h3-fz)
- u-fz-h4 … var(–h4-fz)
SAMPLE
u-fz-xs / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-s / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-def / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-m / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-lg / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-xl / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-h1 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-h2 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-h3 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-fz-h4 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
行間を変えたい
- u-lh-1 … 1
- u-lh-xs … ar(–lh-xs)
- u-lh-sm … var(–lh-sm)
- u-lh-def… line-height: 1.8
- u-lh-lg … var(–lh-lg)
SAMPLE
u-lh-1 / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-lh-xs / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-lh-sm / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-lh-def / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
u-lh-lg / あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。
文字の太さを変えたい
背景色をカラーパレットにない設定色に変えたい
u-bgc-xxxxのutilityクラスを使用すると、既に設定済みの色に変更できる。カラーパレットから選択できる色のように、paddingを付けたい場合は、一旦カラーパレットでグレーあたりを選択してから、追加CSSクラスを使用するといい。
- u-bgc-border
- u-bgc-text
- u-bgc-red
u-bgc-border / あいうえお
u-bgc-text / あいうえお
u-bgc-red / あいうえお
is-pdg-xs / あいうえお
is-pdg-sm / あいうえお
utilityクラスを使用する
padding系のutilityクラスを使用してください。
u-py-0 / あいうえお
u-p-sm / あいうえお
ふきだしスタイルの色を変える
あいうえお（デフォルト）
- is-color-border
- is-color-gray
- is-color-text
- is-color-deep01
- is-color-deep02
- is-color-deep03
- is-color-deep04
- is-color-pale01
- is-color-pale02
- is-color-pale03
- is-color-pale04
- is-color-white … #FFF
- is-color-black … #000
- is-color-red … var(–color_red)
is-color-main-thin / あいうえお
is-color-border / あいうえお
is-color-gray / あいうえお
is-color-text / あいうえお
is-color-deep01 / あいうえお
is-color-deep02 / あいうえお
is-color-deep03 / あいうえお
is-color-deep04 / あいうえお
is-color-pale01 / あいうえお
is-color-pale02 / あいうえお
is-color-pale03 / あいうえお
is-color-pale04 / あいうえお
is-color-white / あいうえお
is-color-black / あいうえお
is-color-red / あいうえお
ふきだしスタイルを中央寄せにする
is-centerを追加CSSクラスに設定する。矢印も中央寄せになる。
is-center / 中央寄せのふきだし
is-center / 中央寄せのふきだし
ふきだしスタイルをブロック要素（幅100%）にする
is-w-autoを追加CSSクラスに設定する。
is-w-auto / 中央寄せのふきだし
is-w-auto / 中央寄せのふきだし
is-centerを追加すると、矢印が中央になる。
is-w-auto is-center / 中央寄せのふきだし
is-w-auto is-center / 中央寄せのふきだし
ふきだしスタイルをふとっちょにする
is-thickを追加CSSクラスに設定する。上下paddingだけ倍になります。
is-thick / あいうえお
is-thick / あいうえお
あ