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

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

alt

ダミーの見出しです

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

alt

ダミーの見出しです

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

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

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

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

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

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

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

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

l-Grid

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

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

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

  • .l-Grid_Item-8of12 カラム数の指定。
  • .l-Grid-reverse カラムの反転。
  • .l-Grid-center カラムのセンタリング。
  • .l-Grid-middle カラムの垂直配置。
One
1/1 → 8/12
Two
1/1 → 4/12
.l-Wrapper
  .l-Grid
    .l-Grid_Item.l-Grid_Item-8of12Md
      .test-Box One<br>1/1 → 8/12
    .l-Grid_Item.l-Grid_Item-4of12Md
      .test-Box Two<br>1/1 → 4/12
One
1/1 → 8/12
Two
1/1 → 4/12
.l-Wrapper
  .l-Grid.l-Grid-reversMd
    .l-Grid_Item.l-Grid_Item-8of12Md
      .test-Box One<br>1/1 → 8/12
    .l-Grid_Item.l-Grid_Item-4of12Md
      .test-Box Two<br>1/1 → 4/12
One
1/1 → 8/12
.l-Wrapper
  .l-Grid.l-Grid-centerMd
    .l-Grid_Item.l-Grid_Item-8of12Md
      .test-Box One<br>1/1 → 8/12

l-Grids

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

バリエーションの豊富なグリッドシステムです。親要素(.l-Grids)にクラスを追加することで、1/2や1/3のような均等なカラムや、8/12と4/12のようなカラムの指定ができます。

カラム間の余白は幅を$l-grids-column-gap、高さを$l-grids-row-gapで統一しています。

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

  • .l-Grids-col2のように1/2から1/5までの均等なカラム指定。
  • .l-Grids-col8to4のように1/12と11/12から5/12と7/12、7/12と5/12から11/12と1/12までの合計10パターンのカラム指定。
  • .l-Grids-col2MdのようにMdLgXlを追加してブレイクポイントの指定。
  • .l-Grids-middleのようにカラムの垂直位置を中央揃え。
  • .l-Grids-noGapでカラム間のガターを0にする。
  • .l-Grids-narrowでカラム間のガターを最小にする。

均等なカラム指定。

One
1/1 → 1/2
Two
1/1 → 1/2
One
1/2 → 1/3
Two
1/2 → 1/3
Three
1/2 → 1/3
Four
1/2 → 1/3
.l-Wrapper
  .l-Grids.l-Grids-col2Md
    .l-Grids_Item
      .test-Box One<br>1/1 → 1/2
    .l-Grids_Item
      .test-Box Two<br>1/1 → 1/2

  .l-Grids.l-Grids-col2.l-Grids-col3Md
    .l-Grids_Item
      .test-Box One<br>1/2 → 1/3
    .l-Grids_Item
      .test-Box Two<br>1/2 → 1/3
    .l-Grids_Item
      .test-Box Three<br>1/2 → 1/3
    .l-Grids_Item
      .test-Box Four<br>1/2 → 1/3

8/12と4/12と4/12と8/12のカラム指定。

One
1/1 → 8/12
Two
1/1 → 4/12
One
1/1 → 4/12
Two
1/1 → 8/12
.l-Wrapper
  .l-Grids.l-Grids-col8to4Md
    .l-Grids_Item
      .test-Box One<br>1/1 → 8/12
    .l-Grids_Item
      .test-Box Two<br>1/1 → 4/12

  .l-Grids.l-Grids-col4to8Md
    .l-Grids_Item
      .test-Box One <br>1/1 → 4/12
    .l-Grids_Item
      .test-Box Two<br>1/1 → 8/12

8/12と4/12のカラム指定かつ、md以上で要素を反転。

One
1/1 → 8/12
Two
1/1 → 4/12
.l-Wrapper
  .l-Grids.l-Grids-col8to4Md.l-Grids-reversMd
    .l-Grids_Item
      .test-Box One<br>1/1 → 8/12
    .l-Grids_Item
      .test-Box Two<br>1/1 → 4/12

カラムの垂直位置を中央揃え。

One
1/1 → 6/12
.l-Grids-middle
.l-Grids-middle
Two
1/1 → 6/12
.l-Wrapper
  .l-Grids.l-Grids-middleMd.l-Grids-col2Md
    .l-Grids_Item
      .test-Box One<br>1/1 → 6/12<br>.l-Grids-middle<br>.l-Grids-middle
    .l-Grids_Item
      .test-Box Two<br>1/1 → 6/12

カラム間のガターを0にします。

One
1/1 → 1/3
Two
1/1 → 1/3
Three
1/1 → 1/3
.l-Wrapper
  .l-Grids.l-Grids-col3Md.l-Grids-noGap
    .l-Grids_Item
      .test-Box One<br>1/1 → 1/3
    .l-Grids_Item
      .test-Box Two<br>1/1 → 1/3
    .l-Grids_Item
      .test-Box Three<br>1/1 → 1/3

カラム間のガターを最小にします。

One
1/1 → 1/3
Two
1/1 → 1/3
Three
1/1 → 1/3
.l-Wrapper
  .l-Grids.l-Grids-col3Md.l-Grids-narrow
    .l-Grids_Item
      .test-Box One<br>1/1 → 1/3
    .l-Grids_Item
      .test-Box Two<br>1/1 → 1/3
    .l-Grids_Item
      .test-Box Three<br>1/1 → 1/3

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

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

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

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

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

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

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

alt

ダミーの見出しです

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

alt

ダミーの見出しです

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

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

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

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

  section.l-Section2.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

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

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

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

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

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

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

alt

ダミーの見出しです

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

alt

ダミーの見出しです

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

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

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

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

  section.l-Section2.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

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

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

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

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

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

.l-Block

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

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

    section.l-Section3.l-Section3-divider
      h3.sw-Heading3 その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
      p.sw-Text そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。
    section.l-Section3.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 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。