Containers (コンテナ)

使い方

  1. 画面幅はSassの変数$pcInnで管理しています。
  2. 固定幅と100％表示以外のレイアウト表示は他のクラスでコントロールしてください。

画面表示

固定幅表示のときにこのコンテナを使います
幅100%表示のときにこのコンテナを使います

HTML/CSS（Sass）

<div class="b-container">固定幅表示のときにこのコンテナを使います</div>
<div class="b-container-fluid">幅100%表示のときにこのコンテナを使います</div>
.b-container {
  margin: 0 auto;
}

.b-container-fluid {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .b-container {
    max-width: 1000px;
    width: 100%;
    padding: 0 2rem;
  }
}
@media screen and (max-width: 767px) {
  .b-container {
    padding: 0 4rem;
  }
}



.b-container {
    margin: 0 auto;
    @include mq(pc) {
      max-width: ($pcInn+px);
      width: 100%;
      padding: 0 2rem;
    }
    @include mq(sp) {
      padding: 0 4rem;
    } 
    &-fluid {
        width: 100%;
    }
}
TOP