v7.1.0

Section

Table of Contents

Detail

Web サイトのセクションと、そのインナーを設定するレイアウト CSS。このドキュメントサイトの各セクション（ヘッダーなど）にも使っています。

Basic

.section 直下に .inner を置くと、画面サイズに応じて幅が可変する中央寄せレイアウト枠ができます。可変の分岐点は、コンフィグ変数 Break Point を参照ください。

<section class="section">
  <div class="inner">children</div>
</section>
SelectorDescription
.sectionセクションとしてのラッパー。
.inner.section 直下に置くと自動で幅設定・中央寄せになります。

Variables

Name
Default Value
  • Name
    $selector-section
    Default Value
    .section
  • Name
    $selector-inner
    Default Value
    .inner
  • Name
    $section-inner-width-fablet
    Default Value
    540px
  • Name
    $section-inner-width-tablet
    Default Value
    720px
  • Name
    $section-inner-width-desktop
    Default Value
    960px
  • Name
    $section-inner-width-wide
    Default Value
    1140px

Mixins

  • musubii-style-section-inner()

Sources