CSSで作るタブ - CSSポジショニングを使って

タブの見本

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

tab1.png

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>

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS