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>

Inputエリア幅100%タイプ

テキスト入力エリアの幅が親要素の幅と同じ(100％)場合、fWidthFullで括ります

<span class="fWidthFull"><input type="text" /></span>
<span class="fWidthFull"><textarea></textarea></span>

Input + label 横並び設定

スマートデザインでは一般的に明示的コンストラクタを使用していますが、
改行が行われる場合、inputとlabelの分離を防ぐために親要素をgLabelクラスで括ります。

<!-- 明示的コンストラクタ : label > input -->
<label><input type="radio" title="ラジオボタン名" />ラジオ</label>
<label><input type="checkbox" title="チェックボックス名" />チェックボックス</label>
<!-- 暗示的コンストラクタ : label + input -->
<input type="radio" title="ラジオボタン名" />
 <label>ラジオ</label>
<input type="checkbox" title="チェックボックス名" />
 <label>チェックボックス</label>
<!-- .gLabel + .gLabel コンストラクタ : span.gLabel > input + label -->
<span class="gLabel">
    <input type="radio" id="radio" />
     <label for="radio">内容</label>
</span>
<span class="gLabel">
    <input type="checkbox" id="checkbox" />
     <label for="checkbox">内容</label>
</span>

Cafe24 Smart design Support

Grid / Margin/ Align

マージンの設定

Inputエリア幅100%タイプ

Input + label 横並び設定