* CSSで作るタブ - CSSポジショニングを使って [#zd242a8c]
** タブの見本 [#fe48d30a]
以下の画像のようなタブを作る。
#ref(tab1.png)
** HTML [#l385a2b3]
タブ群はULタグで表し、LIタグを増やすとタブが増える。
タブ群はULタグで表し、LIタグを増やすとタブが増える。選択されているタブには、class="active"を指定する。
*** ポイント [#cf976d0a]
- liをfloatさせ、タブが横に並ぶようにする。
- liはmargin:0にし、下辺にborderを設定し、ulに下線が引かれたようにする。
- liの中のaの上・右・左辺にborderを設定し、タブっぽくする。
- 選択されているタブである、activeクラスのliにCSSポジショニングで、ボックスを1ピクセル下にずらし、白のborderを設定する事で、liの下線を打ち消す。
-- 選択されてないタブにもborder-bottom:1pxとtop:1pxを設定しているのは、選択されているタブとの高さのズレをなくすため。
<html>
<body>
<style type="text/css">
li {
list-style: none;
float: left;
margin: 0;
border-bottom: 1px solid #000;
}
li a {
display: block;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0 10px 0 0;
}
li a span {
display: block;
border-bottom: 1px solid #000;
position: relative;
top: 1px;
padding: 5px;
}
li.active a span {
display: block;
border-bottom: 1px solid #fff;
position: relative;
top: 1px;
}
</style>
<ul>
<li><a><span>test1</span></a></li>
<li><a><span>test2</span></a></li>
<li class="active"><a><span>test3</span></a></li>
<li><a><span>test4</span></a></li>
</ul>
</body>
</html>
