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>