layout-container

l-container

デバイスに応じて適切に本文幅を調整するコンテナブロック。
/_scss/_config_advance.scss の「$container-max-widths」の定義を参照する。

(contents)
<div class="l-container bg-first bg-mild m-b">
        <div class="p-y line-c" style="background-color: rgba(255,255,255,.5); color: #000">(contents)</div>
</div>

l-container-fluid

コンテナブロックの最大幅の制限を行わない。

(contents)
<div class="l-container l-container-fluid bg-second bg-mild m-b">
        <div class="p-y line-c" style="background-color: rgba(255,255,255,.5); color: #000">(contents)</div>
</div>

l-container-sm

コンテナブロックの最大幅が通常よりも狭くなる。
/_scss/_config_advance.scss の「$container-max-widths-sm」の定義を参照する。

(contents)
<div class="l-container l-container-sm bg-third bg-mild m-b">
        <div class="p-y line-c" style="background-color: rgba(255,255,255,.5); color: #000">(contents)</div>
</div>

l-container-full-md

(breakpoint)が md 以下のときにコンテナ余白を打ち消す。モバイル端末での幅100%表示等に使用する。

(contents)
(contents)
(contents)
<div class="l-container l-container-full-md bg-important bg-mild m-b">
        <div class="p-y line-c" style="background-color: rgba(255,255,255,.5); color: #000">(contents)</div>
</div>
<div class="l-container l-container-sm l-container-full-md bg-important bg-mild m-b">
        <div class="p-y line-c" style="background-color: rgba(255,255,255,.5); color: #000">(contents)</div>
</div>
<div class="l-container l-container-lg l-container-full-md bg-important bg-mild m-b">
        <div class="p-y line-c" style="background-color: rgba(255,255,255,.5); color: #000">(contents)</div>
</div>