CSSでタブを実現する最小のCSS

CSSでタブを実現しようと思うと意外とめんどくさいなーということでbootstrapを使っちゃってる人もいるかと思いますがCSSを直接書いたほうが早いことがありますが飾りすぎのサンプルが多くてイライラします。

というわけでシンプルな最小のtabを作るCSSを公開しておきます。

ポイントはrelativeを使ってbottom: -1pxして背景を線を隠すところです。これがわかれば簡単に作れます。

<ul class="tab-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contents1</a></li>
<li><a href="#">Contents2</a></li>
<li><a href="#">Contents3</a></li>
<li><a href="#">Contents4</a></li>
<li><a href="#">Contents5</a></li>
</ul>

ul.tab-nav {
    margin: 0;
    padding: 0;
    border-bottom: 1px #ddd solid;
}
.tab-nav li{
    float: left;
    padding: 10px;
    bottom: -1px;
    list-style-type: none;
    position: relative;
    border: none;
}
.tab-nav li:hover{
    background-color: #eee;
    border-bottom: 1px #eee solid;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}
.tab-nav li.active:hover {
    background-color: transparent;    
}
.tab-nav li.active {
    border: 1px #ddd solid;
    border-bottom: 1px #fff solid;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}