* 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>

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS