3/4 角丸タブを使ったタブボックスを作る [ホームページ作成] All About

角丸タブを使ってタブボックスを作るソース
（スタイルシート編）

記事Aでは、「表示領域全体の装飾」・「タブそのものの装飾」・「タブに対応するボックスの装飾」の3つの装飾を行うスタイルシートを記述しました。先ほど、「タブそのものを作るHTML部分」だけを記事Bのものに変更しましたから、スタイルシートも「タブそのものの装飾」の部分だけ記事Bのものに差し替えます。

記事Aでご紹介したスタイルシートには、以下のように「tabsクラスを付加したp要素」に対する装飾を行っています。これらはここでは不要です。

/* ▼タブ部分 */
p.tabs { margin: 0px; padding: 0px; }
p.tabs a { ～省略～ }
p.tabs a.tab1 { ～省略～ }
p.tabs a.tab2 { ～省略～ }
p.tabs a.tab3 { ～省略～ }
p.tabs a:hover { ～省略～ }

上記の代わりに、記事Bでご紹介した「タブそのものの装飾」（＝ul要素とli要素を使ったリストの装飾）を記述します。

/* タブ部分 */
div.tabbox ul.tabs { 
   margin:  0px; /* 外側の余白を消す */
   padding: 0px; /* 内側の余白を消す */
   width: 400px; /* 横幅 */
}
div.tabbox ul.tabs li {
   margin: 0px;  /* 各項目周囲の余白をなくす */
   padding: 0px; /* 各項目内側の余白をなくす */
   list-style-type: none; /* 先頭記号を消す */
   float: left;  /* リスト項目を横方向に並べる */
   width: 120px; /* タブのデフォルトの横幅 */
   /* 左上の角丸 */
   background-image: url("tab-base.gif");
   background-repeat: no-repeat;
   background-position: left top;
}
div.tabbox ul.tabs a { 
   display: block; /* ブロックレベルに */
   padding: 5px 0px;      /* 内側の余白 */
   height: 20px;          /* タブの高さ */
   text-align: center;    /* 中央寄せ */
   text-decoration: none; /* 下線を消す */
   /* 右上の角丸 */
   background-image: url("tab-right.gif");
   background-repeat: no-repeat;
   background-position: right top;
}
div.tabbox ul.tabs li.tab1 { background-color: blue; }
div.tabbox ul.tabs li.tab2 { background-color: #aaaa00; }
div.tabbox ul.tabs li.tab3 { background-color: red; width: 90px; }
div.tabbox ul.tabs a:link ,
div.tabbox ul.tabs a:visited { color: white; }
div.tabbox ul.tabs a:hover { color: yellow; text-decoration: underline; }

さらに、タブに対応するボックス部分で回り込みを解除しなければならないため、以下の装飾を加えます。