アウトラインの付いたタブ UI の CSS の記述方法を調べてみた

CSS

以下のようなアウトライン付きタブ UI の CSS の書き方が分からなかったので調べてみました。

シンプルなアウトラインのタブ UI

まず、タブ、タブを束ねるタブグループ、タブに対応するパネルを用意します。タブの底辺を除き、タブとパネルにはアウトラインを引いておきます。


次に、タブグループの底辺、各タブの左辺にネガティブマージンをかけ隣接するアウトラインを重ね合わせるようにします。


アクティブタブとパネルの接合部のラインを消すために、z-index でアクティブタブを前面に持ってきます。この時 z-index を有効にするためにタブとパネルの position を relative にします。


こんな感じになります。

Demo

ソース

<head>
    <style>
        /* Step.1 */
        ul.tabs{
            margin:0;
            padding:0;
        }
        ul.tabs li{
            margin:0;
            padding:4px 20px;
            list-style:none;
            display: -moz-inline-box;   
            display: inline-block;   
            /display: inline;   
            /zoom: 1;
        }
        div.panel{
            padding:0 16px;
        }
        ul.tabs li,
        div.panel{
            border-style:solid;
            border-width:1px;
            border-color:#808080;
            background:#e0e0e0;
        }
        ul.tabs li{
            border-bottom-width:0;
            background:#d0d0d0;
        }
        ul.tabs li.tab-active{
            background:#e0e0e0;
        }

        /* Step.2 */
        ul.tabs{
            margin-bottom:-1px;
        }
        ul.tabs li{
            margin-right:-1px;
        }

        /* Step.3 */
        ul.tabs li.tab-active{
            position:relative;
            z-index:1;
        }
        div.panel{
            position:relative;
            z-index:0;
        }
    </style>
</head>
<body>
    <ul class="tabs">
        <li class="tab-active">Overview</li><li>Reference</li><li>Example</li>
    </ul>
    <div class="panel">
        <h3>Overview</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
</body>

ちなみにソースではタブに inline-block （関連記事）を使用してるので、タブグループの text-align に center や right を指定することで、タブのセンタリングや左寄せも可能です。(左寄せする場合はタブのネガティブマージンは右方向にします。)

Demo

立体感のあるタブ UI

立体感をだすには、タブのネガティブマージンは指定せず、アウトラインの上辺、左辺にベースカラーより明るい色、底辺、右辺に暗い色を配色します。

/* Step.4 */
html{
    background:#f0f8ff;
}
ul.tabs li,
div.panel{
    border-color:#fff #a0a0a0 #a0a0a0 #fff;
}
ul.tabs li{
    margin-right:0;
}

Demo

グラデーションのあるタブ UI

画像ファイルなしでグラデーションを可能にするCSS生成ツール公開しました - Cyokodog::Diary で生成したコードをパネルに割当ます。

/* Step.5 */
ul.tabs li{
    background-color:#e0e0e0;
}
div.panel{
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e0e0e0,EndColorStr=#f8f8f8);
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACWCAYAAAAfduJyAAAAYUlEQVQokYXExQGAQBAEMPqv8txdn1ABs3nkYYy9z2+ccyohBEhKCVJKUWmtQcYYkLUW5JwDee+pQgigGCMopUSVcwaVUkC1VlBrjar3DhpjgOacVGst0N4bdM4B3Xv/+wAAZzNojAkiOAAAAABJRU5ErkJggg==");
    background-repeat:repeat-x;
    background-color:#f8f8f8;
    height:150px;
}

Demo

jQuery 版

jQuery プラグインで上記デザインのタブ UI を簡単に生成することもできます。

タブ UI 生成プラグイン exTAB.js を機能拡張しました - Cyokodog::Diary