CSSで作るタブ - 1ドット画像を使って

タブの見本

以下の画像のようなタブを作る。

tab1.png

HTML

タブ群はULタグで表し、LIタグを増やすとタブが増える。

ポイント

  • 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