Grid / Margin/ Align

グリッド/マージン/整列に関する機能の説明と使用例です。

マージンの設定

テキストやコンポーネントの作成において、グリッドやマージンの設定が必要となる場合に使用できます。

<!-- 上マージン -->
<p class="gBlank5">上部に5pxのマージンが宣言されます。</p>
<p class="gBlank10">上部に10pxのマージンが宣言されます。</p>
<p class="gBlank20">上部に20pxのマージンが宣言されます。</p>
<p class="gBlank30">上部に30pxのマージンが宣言されます。</p>
<!-- 左マージン -->
<p class="gIndent10">左に10pxのマージンが宣言されます。</p>
<p class="gIndent20">左に20pxのマージンが宣言されます。</p>
<!-- 右マージン -->
<p class="gSpace10">右に10pxのマージンが宣言されます。</p>
<p class="gSpace20">右に20pxのマージンが宣言されます。</p>
<!-- コンポーネントのマージン -->
<div class="ec-base-box typeThin gBlank20">
    <p>テキストが表示されるエリアです。</p>
</div>
<div class="ec-base-box typeThin gIndent10">
    <p>テキストが表示されるエリアです。</p>
</div>
<div class="ec-base-box typeThin gSpace20">
    <p>テキストが表示されるエリアです。</p>
</div>
<!-- ボックス + ボックス -->
<div class="ec-base-box typeThin">
    <p>テキストが表示されるエリアです。</p>
</div>
<div class="ec-base-box typeThinBg gMerge">
    <p>テキストが表示されるエリアです。</p>
</div>

Cafe24 Smart design Support

Grid / Margin/ Align

マージンの設定