Styleguide

sw-Br

/src/assets/css/namespace/sitewide/_Br.scss

 タグに指定をして、改行をブレイクポイントごとにコントロールします。

常に改行
されます

ブレイクポイント（md）以降に改行
されます。

ブレイクポイント（md）以降は改行
されません。

.l-Wrapper
  p.sw-Text 常に改行
    br
    | されます
  p.sw-Text ブレイクポイント（`md`）以降に改行
    br.sw-BrShowMd
    | されます。
  p.sw-Text ブレイクポイント（`md`）以降は改行
    br.sw-HideMd
    | されません。

sw-Delimiter

/src/assets/css/namespace/sitewide/_Delimiter.scss

途中で改行をさせたくないフレーズやキーワードに指定します。囲まれた範囲（Delimiter）がまとまって改行されます。

テキストは基本的にスペースや役物を基準に改行されますが、この部分はまとめて改行されます。ここは通常のテキストです。

.l-Wrapper
  p.sw-Text テキストは基本的にスペースや役物を基準に改行されますが、
    span.sw-Delimiter この部分はまとめて改行されます。
    | ここは通常のテキストです。

sw-Divider

/src/assets/css/namespace/sitewide/_Divider.scss

<hr>のような区切り記号を使って、分割・グルーピングします。

テキストです。

.l-Wrapper
  p.sw-Text テキストです。
  hr.sw-Divider
  p.sw-Text テキストです。

sw-Label

/src/assets/css/namespace/sitewide/_Label.scss

インラインで表示するラベルコンポーネントです。

spanタグのラベルです。 labelタグのラベルです。aタグのラベルです。

.l-Wrapper
  span.sw-Label spanタグのラベルです。
  label.sw-Label labelタグのラベルです。
  a.sw-Label(href="#") aタグのラベルです。

sw-Lead

/src/assets/css/namespace/sitewide/_Lead.scss

リード文（コンテンツの冒頭に登場するコンテンツを簡潔に表した文章）のスタイルです。他の文章と区別するためだけに利用し、の重要性や深刻性、の強調（アクセント）、<h2>のような見出しとしての意味はありません。

◯◯◯は××に優れており、今まで多くのお客さまにご愛用いただいているロングセラー商品です。

△△の強みを生かした□□を使用しており、発売以来、日々改良を重ねております。

.l-Wrapper
  p.sw-Lead
    b ◯◯◯は××に優れており、今まで多くのお客さまにご愛用いただいているロングセラー商品です。
  p.sw-Text △△の強みを生かした□□を使用しており、発売以来、日々改良を重ねております。

sw-Sup

/src/assets/css/namespace/sitewide/_Sup.scss

登録商標（アールマーク）や著作権（マルシーマーク）、注釈リンク（※1）などに使う上付き文字です。

登録商標^®です。

注釈^※1です。

.l-Wrapper
  p.sw-Text 登録商標
    sup.sw-Sup ®
    | です。
  p.sw-Text 注釈
    sup.sw-Sup: a(href="#") ※1
    | です。

sw-Text

/src/assets/css/namespace/sitewide/_Text.scss

基本のテキストスタイルです。

この書生というのは時々我々を捕えて煮て食うという話である。

しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

どこで生れたかとんと見当がつかぬ。

.l-Wrapper
  p.sw-Text この書生というのは時々我々を捕えて煮て食うという話である。
  .sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
  p.sw-Text どこで生れたかとんと見当がつかぬ。

sw-TextEmphasis

/src/assets/css/namespace/sitewide/_TextEmphasis.scss

で使われるようなスタイルです。アクセントをつけたい単語や短い文章で使用し、強調や重要性を示しません。

30%OFFのため、お買い得です！（30%OFFであることを特に伝えたい）

30%OFFのため、お買い得です！（お買い得であることを特に伝えたい）

.l-Wrapper
  p.sw-Text
    em.sw-TextEmphasis 30%OFFのため、
    | お買い得です！
    small （30%OFFであることを特に伝えたい）
  p.sw-Text 30%OFFのため、
    em.sw-TextEmphasis お買い得です！
    small （お買い得であることを特に伝えたい）

sw-TextImportant

/src/assets/css/namespace/sitewide/_TextImportant.scss

で使われるようなスタイルです。重要性や緊急性・深刻性があることを示します。

30%OFFのため、お買い得です！

使用上の注意をよく読み、用法・用量を守って正しくお使い下さい。

.l-Wrapper
  p.sw-Text
    strong.sw-TextImportant 30%OFFのため、お買い得です！
  p.sw-Text
    strong.sw-TextImportant 使用上の注意をよく読み、用法・用量を守って正しくお使い下さい。

sw-TextSecondary

/src/assets/css/namespace/sitewide/_TextSecondary.scss

やで使われるようなテキストスタイルです。補足的・副次的な意味合いを持たせる場合に使います。

通常の文章です

補足的な文章です

.l-Wrapper
  p.sw-Text 通常の文章です
  p.sw-TextSecondary 補足的な文章です

ID

Category

Namespace

All Colors