Tab

タブに関する機能の説明と使用例です。

タイプ

デフォルト

タブメニュー1つ当たりの最小幅は168pxで、デザインによって最大4つまで使用することができます。
テキストの長さに合わせてタブの横幅のサイズも変更されます。
デフォルトタイプは、ページの移動を伴う同期式となっています。
非同期式に関しましては[応用 > eTab(ページ内でのコンテンツ移動)]に記述されている内容を参考にしてください。

<div class="ec-base-tab">
    <ul class="menu">
        <li class="selected"><a href="#none">タブメニュー1</a></li>
        <li><a href="#none">タブメニュー2</a></li>
    </ul>
</div>

ライン

デフォルトタイプと構造は同じですが、選択中のタブの色が異なります。
また、デフォルトタイプと同様に横幅可変のgridクラスが使用できます。

<div class="ec-base-tab typeLight">
    <ul class="menu">
        <li class="selected"><a href="#none">タブメニュー1</a></li>
        <li><a href="#none">タブメニュー2</a></li>
    </ul>
</div>

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

横幅可変

表示されるタブメニューの横幅をすべて同じサイズにしたい場合に使用できます。
テキストが横幅のサイズより長くなると自動的に改行され、中央揃えで表示されます。

<!-- タブメニュー(2) -->
<div class="ec-base-tab grid2">
    <ul class="menu">
        <li class="selected"><a href="#none">grid2</a></li>
        <li><a href="#none">タブメニュー2</a></li>
    </ul>
</div>
<!-- タブメニュー(3) -->
<div class="ec-base-tab grid3">
    <ul class="menu">
        <li class="selected"><a href="#none">grid3</a></li>
        <li><a href="#none">タブメニュー2</a></li>
        <li><a href="#none">タブメニュー3</a></li>
    </ul>
</div>
<!-- タブメニュー(4) -->
<div class="ec-base-tab grid4">
    <ul class="menu">
        <li class="selected"><a href="#none">grid4</a></li>
        <li><a href="#none">タブメニュー2</a></li>
        <li><a href="#none">タブメニュー3</a></li>
        <li><a href="#none">タブメニュー4</a></li>
    </ul>
</div>
<!-- タブメニュー(5) -->
<div class="ec-base-tab grid5">
    <ul class="menu">
        <li class="selected"><a href="#none">grid5</a></li>
        <li><a href="#none">タブメニュー2</a></li>
        <li><a href="#none">タブメニュー3</a></li>
        <li><a href="#none">タブメニュー4</a></li>
        <li><a href="#none">タブメニュー5</a></li>
    </ul>
</div>
<!-- タブメニュー(6) -->
<div class="ec-base-tab grid6">
    <ul class="menu">
        <li class="selected"><a href="#none">grid6</a></li>
        <li><a href="#none">タブメニュー2</a></li>
        <li><a href="#none">タブメニュー3</a></li>
        <li><a href="#none">タブメニュー4</a></li>
        <li><a href="#none">タブメニュー5</a></li>
        <li><a href="#none">タブメニュー6</a></li>
    </ul>
</div>
<!-- タブメニュー(7) -->
<div class="ec-base-tab grid7">
    <ul class="menu">
        <li class="selected"><a href="#none">grid7</a></li>
        <li><a href="#none">タブメニュー2</a></li>
        <li><a href="#none">タブメニュー3</a></li>
        <li><a href="#none">タブメニュー4</a></li>
        <li><a href="#none">タブメニュー5</a></li>
        <li><a href="#none">タブメニュー6</a></li>
        <li><a href="#none">テキストが長くなると自動改行</a></li>
    </ul>
</div>

横幅可変(動的)

要素のサイズが指定されていない場合、または要素の数が動的に変化する場合に使用できます。
表示されるタブメニューの数に合わせ、すべてのタブメニューの横幅が同じサイズで整列されます。

<!-- タブメニュー(flex) -->
<div class="ec-base-tab gFlex">
    <ul class="menu">
        <li class="selected"><a href="#none">grid Flex</a></li>
        <li><a href="#none">タブメニュー2</a></li>
        <li><a href="#none">タブメニュー3</a></li>
        <li><a href="#none">タブメニュー4</a></li>
        <li><a href="#none">タブメニュー5</a></li>
    </ul>
</div>
    
<!-- 中央揃え -->
<div class="ec-base-tab gFlex">
    <ul class="menu">
        <li class="selected"><a href="#none">grid Flex</a></li>
        <li><a href="#none">タブメニュー2</a></li>
        <li><a href="#none">タブメニュー3</a></li>
        <li><a href="#none">タブメニュー4</a></li>
        <li><a href="#none">タブメニュー5</a></li>
        <li><a href="#none">タブメニュー6</a></li>
        <li><a href="#none">テキストが長くなると中央揃えで改行</a></li>
    </ul>
</div>

応用

ボタン/メッセージ

タブメニューにボタンまたはメッセージを追加して使用することができます。

<!-- タブメニュー + ボタン -->
<div class="ec-base-tab">
    <ul class="menu">
        <li class="selected"><a href="#none">タブメニュー1</a></li>
        <li><a href="#none">タブメニュー2</a></li>
    </ul>
    <span class="right"><a href="#none" class="btnNormal">詳細情報</a></span>
</div>
<!-- タブメニュー + メッセージ -->
<div class="ec-base-tab typeLight">
    <ul class="menu">
        <li class="selected"><a href="#none">タブメニュー1</a></li>
        <li><a href="#none">タブメニュー2</a></li>
    </ul>
    <span class="right">案内メッセージ</span>
</div>

ページ内でのコンテンツ移動

コンテンツの表示・非表示を応用した、JS制御の画面切り替え方式です。
ページ間を移動するのではなく、ページ内でコンテンツの移動が行われる際に使用できます。

<!-- 非同期式ページ切り替え：デフォルト -->
<div class="ec-base-tab eTab">
    <ul class="menu">
        <li class="selected"><a href="#tabCont1_1">タブメニュー1</a></li>
        <li><a href="#tabCont1_2">タブメニュー2</a></li>
    </ul>
    <div id="tabCont1_1" class="tabCont" style="display:block;">
        タブメニュー1の内容表示エリアです。
    </div>
    <div id="tabCont1_2" class="tabCont" style="display:none;">
        タブメニュー2の内容表示エリアです。
    </div>
</div>
<!-- 非同期式ページ切り替え：ライン -->
<div class="ec-base-tab typeLight eTab">
    <ul class="menu">
        <li class="selected"><a href="#tabCont1_1">タブメニュー1</a></li>
        <li><a href="#tabCont1_2">タブメニュー2</a></li>
    </ul>
    <div id="tabCont1_1" class="tabCont" style="display:block;">
        タブメニュー1の内容表示エリアです。
    </div>
    <div id="tabCont1_2" class="tabCont" style="display:none;">
        タブメニュー2の内容表示エリアです。
    </div>
</div>

Cafe24 Smart design Support

Tab

タイプ