Styleguide

ID

Category

Namespace

All Colors

l-Block

/src/assets/css/namespace/layout/_Block.scss

見出しや画像などを含んだブロック同士の余白を指定します。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

.l-Wrapper
  .l-Block
    .test-Block
      .test-Block_Left
        img(src="https://placehold.jp/300x200.png" alt)
      .test-Block_Right
        h3 ダミーの見出しです
        p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
  .l-Block
    .test-Block
      .test-Block_Left
        img(src="https://placehold.jp/300x200.png" alt)
      .test-Block_Right
        h3 ダミーの見出しです
        p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

l-Block.-divider

/src/assets/css/namespace/layout/_Block.scss

.-dividerを追加すると間にボーダーが入ります。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

.l-Wrapper
  .l-Block.-divider
    .test-Block
      .test-Block_Left
        img(src="https://placehold.jp/300x200.png" alt)
      .test-Block_Right
        h3 ダミーの見出しです
        p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
  .l-Block.-divider
    .test-Block
      .test-Block_Left
        img(src="https://placehold.jp/300x200.png" alt)
      .test-Block_Right
        h3 ダミーの見出しです
        p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

l-Container

/src/assets/css/namespace/layout/_Container.scss

コンテンツ内の上下に大きめの余白をとります。

レイアウト例です。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

.l-Container
  .l-Wrapper
    section.l-Section2
      h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    section.l-Section2
      h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

l-ContainerBg

/src/assets/css/namespace/layout/_ContainerBg.scss

コンテンツ内の上下に大きめの余白をとります。背景色が入ります。

レイアウト例です。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

.l-ContainerBg
  .l-Wrapper
    section.l-Section2
      h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    section.l-Section2
      h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

l-ContainerBg.-delimiter

/src/assets/css/namespace/layout/_ContainerBg.scss

.-delimiterを追加するとボーダーがつきます。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

.l-ContainerBg.-delimiter
  .l-Wrapper
    section.l-Section2
      h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    section.l-Section2
      h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

l-Flex

/src/assets/css/namespace/layout/_Flex.scss

標準的なグリッドシステムです。カラムごとに任意の値を指定したい場合に使います。 カラム間の余白は横を$flex-column-gap、縦を$flex-row-gapで統一しています。

以下のような指定ができます。

  • カラム数の指定（デフォルトは-12/12）。
    • .l-Flex_Item.-8/12
    • .l-Flex_Item.-4/12
  • 均等なカラム数の指定（分母は$flex-equal-columnで定義、100%から始める場合は-1/1は必須）
    • .l-Flex_Item.-1/2
    • .l-Flex_Item.-1/2
  • カラムの反転（デフォルトは.-row）。
    • .l-Flex.-reverse
  • カラムを戻す。
    • .l-Flex.-row
  • カラムの順番を個別に指定（orderの数値は$flex-orderで定義）。
    • .l-Flex.-order1
    • .l-Flex.-order2
  • カラムの水平方向の揃え（デフォルトは.-left）。
    • .l-Flex.-left
    • .l-Flex.-center
    • .l-Flex.-right
  • カラムの垂直方向の揃え（デフォルトは.-top）。
    • .l-Flex.-top
    • .l-Flex.-middle
    • .l-Flex.-bottom
  • ブレイクポイントの追加（上記の各指定で併用可能 .l-Flex_Item.-8/12@mdなど）。
    • @sm
    • @md
    • @lg
    • @xl

md以降で2カラム

-8/12@md
-4/12@md
.l-Wrapper
  .l-Flex
    .l-Flex_Item(class="-8/12@md") -8/12@md
    .l-Flex_Item(class="-4/12@md") -4/12@md

md以降で2カラムを反転

-8/12@md
-4/12@md
.l-Wrapper
  .l-Flex(class="-reverse@md")
    .l-Flex_Item(class="-8/12@md") -8/12@md
    .l-Flex_Item(class="-4/12@md") -4/12@md

md以降で2カラムの表示順を個別に指定

-8/12@md -order2@md
-4/12@md -order1@md
.l-Wrapper
  .l-Flex
    .l-Flex_Item(class="-8/12@md -order2@md") -8/12@md -order2@md
    .l-Flex_Item(class="-4/12@md -order1@md") -4/12@md -order1@md

md以降で1カラムの中央配置

-8/12@md
.l-Wrapper
  .l-Flex(class="-center@md")
    .l-Flex_Item(class="-8/12@md") -8/12@md

1カラム、2カラム、3カラム

-1/1 -1/2@md -1/3@lg
-1/1 -1/2@md -1/3@lg
-1/1 -1/2@md -1/3@lg
-1/1 -1/2@md -1/3@lg
-1/1 -1/2@md -1/3@lg
-1/1 -1/2@md -1/3@lg
.l-Wrapper
  .l-Flex.-rowGap
    .l-Flex_Item(class="-1/1 -1/2@md -1/3@lg") -1/1 -1/2@md -1/3@lg
    .l-Flex_Item(class="-1/1 -1/2@md -1/3@lg") -1/1 -1/2@md -1/3@lg
    .l-Flex_Item(class="-1/1 -1/2@md -1/3@lg") -1/1 -1/2@md -1/3@lg
    .l-Flex_Item(class="-1/1 -1/2@md -1/3@lg") -1/1 -1/2@md -1/3@lg
    .l-Flex_Item(class="-1/1 -1/2@md -1/3@lg") -1/1 -1/2@md -1/3@lg
    .l-Flex_Item(class="-1/1 -1/2@md -1/3@lg") -1/1 -1/2@md -1/3@lg

l-Section2

/src/assets/css/namespace/layout/_Section2.scss

h2相当の見出しをラップするセクションの余白を指定します。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

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

第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section2
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

  section.l-Section2
    h2.sw-Heading2 第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
    .l-Block
      .test-Block
        .test-Block_Left
          img(src="https://placehold.jp/300x200.png" alt)
        .test-Block_Right
          h3 ダミーの見出しです
          p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
    .l-Block
      .test-Block
        .test-Block_Left
          img(src="https://placehold.jp/300x200.png" alt)
        .test-Block_Right
          h3 ダミーの見出しです
          p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
    p.sw-Text その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

l-Section2.-divider

/src/assets/css/namespace/layout/_Section2.scss

レイアウト例です。.-dividerを追加すると.l-Section2同士の間にボーダーがつきます。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

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

第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section2.-divider
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

  section.l-Section2.-divider
    h2.sw-Heading2 第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
    .l-Block
      .test-Block
        .test-Block_Left
          img(src="https://placehold.jp/300x200.png" alt)
        .test-Block_Right
          h3 ダミーの見出しです
          p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
    .l-Block
      .test-Block
        .test-Block_Left
          img(src="https://placehold.jp/300x200.png" alt)
        .test-Block_Right
          h3 ダミーの見出しです
          p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
    p.sw-Text その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

l-Section2.-dividerFull

/src/assets/css/namespace/layout/_Section2.scss

レイアウト例です。.-dividerFullを追加すると.l-Section2同士の間にボーダーがつきます。ボーダーの横幅は画面に対して常に100%（100vw）になります。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

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

第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

alt

ダミーの見出しです

ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。

その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section2.-dividerFull
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

  section.l-Section2.-dividerFull
    h2.sw-Heading2 第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
    .l-Block
      .test-Block
        .test-Block_Left
          img(src="https://placehold.jp/300x200.png" alt)
        .test-Block_Right
          h3 ダミーの見出しです
          p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
    .l-Block
      .test-Block
        .test-Block_Left
          img(src="https://placehold.jp/300x200.png" alt)
        .test-Block_Right
          h3 ダミーの見出しです
          p ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。ダミーのテキストです。
    p.sw-Text その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

l-Section3

/src/assets/css/namespace/layout/_Section3.scss

h3相当の見出しをラップするセクションの余白を指定します。

第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。

そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。

吾輩は猫である。名前はまだ無い。

.l-Block

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

.l-Wrapper
  section.l-Section2
    h2.sw-Heading2 第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

    section.l-Section3
      h3.sw-Heading3 その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
      p.sw-Text そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。
    section.l-Section3
      h3.sw-Heading3 吾輩は猫である。名前はまだ無い。
      .l-Block
        p.test-Box .l-Block
      p.sw-Text どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

l-Section3.-divider

/src/assets/css/namespace/layout/_Section3.scss

レイアウト例です。.-dividerを追加すると.l-Section3同士の間にボーダーがつきます。

第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。

そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。

吾輩は猫である。名前はまだ無い。

.l-Block

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

.l-Wrapper
  section.l-Section2
    h2.sw-Heading2 第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

    section.l-Section3.-divider
      h3.sw-Heading3 その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
      p.sw-Text そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。
    section.l-Section3.-divider
      h3.sw-Heading3 吾輩は猫である。名前はまだ無い。
      .l-Block
        p.test-Box .l-Block
      p.sw-Text どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

l-Section4

/src/assets/css/namespace/layout/_Section4.scss

h4相当の見出しをラップするセクションの余白を指定します。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

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

第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。

そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。

吾輩は猫である。名前はまだ無い。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

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

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

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

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section2
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

  section.l-Section2
    h2.sw-Heading2 第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

    section.l-Section3
      h3.sw-Heading3 その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
      p.sw-Text そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。
    section.l-Section3
      h3.sw-Heading3 吾輩は猫である。名前はまだ無い。

      section.l-Section4
        h4.sw-Heading4 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
        p.sw-Text この書生というのは時々我々を捕えて煮て食うという話である。
        p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
      section.l-Section4
        h4.sw-Heading4 どこで生れたかとんと見当がつかぬ。
        p.sw-Text 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

l-Section5

/src/assets/css/namespace/layout/_Section5.scss

h5相当の見出しをラップするセクションの余白を指定します。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

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

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

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

吾輩は猫である。名前はまだ無い。

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

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

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

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

    section.l-Section5
      h5.sw-Heading5 吾輩は猫である。名前はまだ無い。
      p.sw-Text 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
    section.l-Section5
      h5.sw-Heading5 どこで生れたかとんと見当がつかぬ。
      p.sw-Text 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

l-Wrapper

/src/assets/css/namespace/layout/_Wrapper.scss

コンテンツの横幅を制限します。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

.l-Wrapper
  section.l-Section2
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

l-Wrapper_Full

/src/assets/css/namespace/layout/_Wrapper.scss

.l-Wrapper_Fullを入れ子にすると、.l-Wrapperの中でも画面いっぱいに表示されます。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

.l-Wrapper
  .l-Wrapper_Full
    section.l-Section2
      h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

l-Wrapper_FullBg

/src/assets/css/namespace/layout/_Wrapper.scss

.l-Wrapper_FullBgを入れ子にすると、.l-Wrapperの中でも背景色が画面いっぱいに表示されます。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

.l-Wrapper
  .l-Wrapper_FullBg(style="background-color: #eee;")
    section.l-Section2
      h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。