* CSSで作るタブ - 1ドット画像を使って[#h2bdf339]
** タブの見本 [#we9cd819]
以下の画像のようなタブを作る。
#ref(tab1.png)
** HTML [#c7b5a4ba]
タブ群はULタグで表し、LIタグを増やすとタブが増える。
タブ群はULタグで表し、LIタグを増やすとタブが増える。選択されているタブには、class="active"を指定する。
*** ポイント [#b7b682a6]
- ulの背景に1ドットの黒色の画像(dot.gif)をbottomに横に並べて、ulの下辺にボーダーがあるようにする。
-- borderでなく背景画像を使う理由は、borderを使うとliのborderと重複してズレが出来るから。
-- なお、後述するようにliはfloatさせるので、このままではulの高さが出ない。高さを出すために、IE向けにzoom:100%、その他のブラウザ向けに:afterでclear:bothする。
- liをfloatさせ、タブが横に並ぶようにする。
- liの四辺にはborderを設定する。これでタブっぽくなる。
- 選択されているli(activeクラス)の下辺に白のborderを設定し、ulの背景画像のボーダーを打ち消す。これでタブが選択されていうように見える。
<html>
<body>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
background: transparent url(dot.gif) repeat-x center bottom;
zoom: 100%;
}
ul:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
li {
float: left;
margin: 0 10px 0 0;
padding: 5px;
border: 1px solid #000;
}
li.active {
border-bottom: 1px solid #fff;
}
p:after {
content: "test";
}
</style>
<ul>
<li>test1</li>
<li>test2</li>
<li class="active">test3</li>
<li>test4</li>
</ul>
</body>
</html>