layout-container

echo-container

内包する要素の最大幅を、デバイスに応じて適切に調整するコンテナブロックを表示する。
常に 0.5rem の左右余白を確保する。

デフォルトでは、日本国の一般的なウェブサイトのコンテンツ幅に沿うよう変化する。
Sassを使用できる場合、最大幅は一括変更できる。 /_scss/_config_advance.scss の配列 $container-max-widths-md の値を参照する。

内包する要素の最大幅の変化
(breakpoint) .echo-container-xs .echo-container-sm .echo-container .echo-container-lg .echo-container-fluid
md以下 48rem
(768px)
48rem
(768px)
48rem
(768px)
48rem
(768px)
none
lg以上 60rem
(960px)
60rem
(960px)
60rem
(960px)
xl以上 75rem
(1200px)
75rem
(1200px)
xxl以上 90rem
(1440px)

このサンプルコードでは、範囲がわかるよう背景色を追加している。背景色が薄くなっている範囲が、内包する要素の最大幅となる。

(contents)
<div class="echo-margin-y-xl" style="margin-left: -0.625rem; margin-right: -0.625rem;">

<div class="echo-container">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

</div>

sub class echo-container-fluid

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

(contents)
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">

<div class="echo-container echo-container-fluid">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

</div>

sub class echo-container-(size)

コンテナブロックの最大幅を変更する。 (size) は xs, sm, lg に対応している。

それぞれの最大幅は、 /_scss/_config_advance.scss の配列 $container-max-widths-xs, $container-max-widths-sm, $container-max-widths-lg, $container-max-widths-xl の値を参照する。

echo-container-xs

(contents)

echo-container-sm

(contents)

(default)

(contents)

echo-container-lg

(contents)
<div style="margin-left: -0.625rem; margin-right: -0.625rem;">

<p class="echo-title echo-title-style-b echo-title-level-4 echo-margin-bottom-sm">echo-container-xs</p>

<div class="echo-container echo-container-xs">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

<p class="echo-title echo-title-style-b echo-title-level-4 echo-margin-top-lg echo-margin-bottom-sm">echo-container-sm</p>

<div class="echo-container echo-container-sm">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

<p class="echo-title echo-title-style-b echo-title-level-4 echo-margin-top-lg echo-margin-bottom-sm">(default)</p>

<div class="echo-container">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

<p class="echo-title echo-title-style-b echo-title-level-4 echo-margin-top-lg echo-margin-bottom-sm">echo-container-lg</p>

<div class="echo-container echo-container-lg">
    <div style="padding: 5px; text-align: center; background-color: rgba(255,255,255,.5);">(contents)</div>
</div>

</div>