- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- HTML/CSSで作るタブ/CSSポジショニングを使って へ行く。
- 1 (2009-11-28 (土) 08:45:31)
- 2 (2009-11-28 (土) 08:55:10)
CSSで作るタブ - CSSポジショニングを使って
タブの見本
以下の画像のようなタブを作る。
HTML
タブ群はULタグで表し、LIタグを増やすとタブが増える。
ポイント
- 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>
