Box

テキストコンテナに関する機能の説明と使用例です。

タイプ

太線(デフォルト)

顧客の個人情報など、重要度の高い内容が表示されているエリアをボックスで囲みたい場合に使用できます。

<div class="ec-base-box">
    <p>テキストが表示されます。</p>
</div>

中央分離線

画面の中央に分離線を表示したい場合に使用できます。

<div class="ec-base-box gHalf">
    <p>テキストが表示されます。</p>
    <p>テキストが表示されます。</p>
</div>

細線

ボックスを囲む線の太さがデフォルトタイプより細いタイプです。
細線タイプのボックスを拡張する場合にも応用できます。

<div class="ec-base-box typeThin">
    <p>テキストが表示されます。</p>
</div>

背景色

デフォルトタイプに背景色が追加されたボックスです。

<div class="ec-base-box typeBg">
    <p>テキストが表示されます。</p>
</div>

背景色+細線

細線タイプに背景色が追加されたボックスです。
細線タイプのボックスを拡張する場合にも応用できます。

<div class="ec-base-box typeThinBg">
    <p>テキストが表示されます。</p>
</div>>

グリッド/マージン/整列

ボックス+ボックス

細線タイプのボックス2つを並べて配置する際、
ボックスが重なる部分の線が1pxで表示されるように設定したい場合に使用できます。

<div class="ec-base-box typeThin">
    <p>テキストが表示されるエリアです。</p>
</div>
<div class="ec-base-box typeThinBg gMerge">
    <p>テキストが表示されるエリアです。</p>
</div>

中央揃え

特定の$MODULE(モジュール)に含まれている.ec-base-boxにCSSソースを追加し､
ボックスの横幅と配置時の整列基準を編集することができます｡

<!-- 中央揃え -->
<div module="MODULE" class="ec-base-box">
    <div class="ec-base-box typeThinBg">
        <p class="ec-base-help">内容を入力してください。</p>
    </div>
    <div class="ec-base-box typeThin typeMember gMerge">
        <div class="information">
            <span class="thumbnail"><img src="//img.echosting.cafe24.com/skin/base/member/img_member_default.gif" alt="" /></span>
            <div class="description">
                <p><strong>name</strong> 様は[group_name]会員です</p>
                <dl class="ec-base-desc typeBullet gMedium">
                    <dt>タイトル</dt>
                    <dd>内容</dd>
                    <dt>タイトル</dt>
                    <dd>内容</dd>
                </dl>
            </div>
        </div>
    </div>
</div>
<!-- cssソースの適用例 -->
.Module { width:600px; margin:0 auto; }

応用

利用規約

背景色タイプのボックスと細線タイプのボックスを組み合わせて利用規約の表示に活用することができます。

<div class="ec-base-box typeThinBg">
    <div class="agree">
        <p>テキストが表示されます。</p>
    </div>
</div>

商品選択

UIとして使用することができます。

<div class="ec-base-box typeProduct">
    <p class="thumbnail"><a href="#none"><img src="//img.echosting.cafe24.com/thumb/75x75.gif" alt="" /></a></p>
    <div class="information">
        <h3>商品名</h3>
        <strong class="txtEm">10,000円</strong>
        <p class="button">
            <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/board/btn_prd_detail.gif" alt="アイテム詳細" /></a>
            <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/board/btn_prd_select.gif" alt="商品情報の選択" /></a>
            <a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/board/btn_prd_order.gif" alt="注文商品の選択" /></a>
        </p>
    </div>
</div>

会員情報

顧客の会員情報を表示するためのUIとして使用することができます。

<!-- デフォルトタイプの会員情報 -->
<div class="ec-base-box typeMember">
    <div class="information">
        <strong class="thumbnail"><img src="//uidevdmp.cafe24.com/web/upload/mg_img_btn_mem_group_b2.gif" alt="" /><br />上詰め</strong>
        <div class="description">
            <p><strong>○○○</strong>様は[vip]会員です。</p>
            <ul>
                <li>テキストが表示されます。</li>
                <li>テキストが表示されます。</li>
            </ul>
        </div>
    </div>
</div>
<!-- 会員情報(拡張タイプ)-->
<div class="ec-base-box typeThinBg">
    <p class="ec-base-help">テキストが表示されます。</p>
</div>
<div class="ec-base-box typeThin typeMember gMerge">
    <div class="information">
        <strong class="thumbnail"><img src="//uidevdmp.cafe24.com/web/upload/mg_img_btn_mem_group_b2.gif" alt="" /><br />上詰め</strong>
        <div class="description">
            <p><strong>○○○</strong>様は[vip]会員です。</p>
            <ul>
                <li>テキストが表示されます。</li>
                <li>テキストが表示されます。</li>
            </ul>
        </div>
    </div>
</div>
<!-- 会員情報(拡張タイプ) + ボックスタイプの会員情報-->
<div class="ec-base-box typeThinBg">
    <p class="ec-base-help">テキストが表示されます。</p>
</div>
<div class="ec-base-box typeThin typeMember gMerge">
    <div class="information">
        <strong class="title"><img src="//uidevdmp.cafe24.com/web/upload/mg_img_btn_mem_group_b2.gif" alt="" /><br />中央揃え</strong>
        <div class="description">
            <p><strong>○○○</strong>様は[vip]会員です。</p>
            <ul>
                <li>テキストが表示されます。</li>
                <li>テキストが表示されます。</li>
            </ul>
        </div>
    </div>
</div>
<div class="ec-base-box typeThinBg gMerge">
    <p>テキストが表示されます。</p>
</div>

Cafe24 Smart design Support

Box

タイプ