[CSS]シンプルなHTMLでタブを角丸にするチュートリアル（イラスト付き）

Post on:2011年9月7日

HTML

HTMLは非常にシンプルで、リスト要素で実装しています。

<ul class="tabs group">
  <li class="active"><a href="#one">One</a></li>
  <li><a href="#two">Two</a></li>
  <li><a href="#three">Three</a></li>
  <li><a href="#three">Four</a></li>
</ul>

classのactiveは、現在のタブを明示するものです。

リスト要素をどのように角丸のタブにするか、イラストでご紹介。

リスト要素はブロックレベルで、アンカー要素はインラインなので、レイアウトはこのようになります。

リスト要素にfloat:left;を指定すると、リストはお互いに横並びになり、サイズがアンカー要素の大きさに縮小されます。

実際は、リストの各アイテムはマージンとパディングを持っていないため、アンカー要素と同じサイズになります。

ここからは一つのアイテムのみにフォーカスします。

リスト要素とアンカー要素で合計4つの擬似要素を設定できます。そのうちの2つを使用してタブの下左と下右に円を配置します。

残りの2つの擬似要素を使用して、少し小さい四角を配置します。

activeを適用しているアクティブなタブとコンテンツは同じ背景色を共有します。

四角はアクティブなタブと同じ色にします。

z-indexを使用して円を上にし、四角の重なっている箇所を除外します。

これでボーダーはうまくいきました。

最後に、border-radiusを適用してタブの上部も角丸にして、完成です。

[ad#ad-2]

CSS

完成したスタイルシートは、下記のようになります。

.tabs li {
  /* Makes a horizontal row */
  float: left; 

  /* So the psueudo elements can be
     abs. positioned inside */
  position: relative;
}
.tabs a {
  /* Make them block level
     and only as wide as they need */
  float: left;
  padding: 10px 40px;
  text-decoration: none;

  /* Default colors */
  color: black;
  background: #ddc385; 

  /* Only round the top corners */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.tabs .active {
  /* Highest, active tab is on top */
  z-index: 3;
}
.tabs .active a {
  /* Colors when tab is active */
  background: white;
  color: black;
}
.tabs li:before, .tabs li:after,
.tabs li a:before, .tabs li a:after {
  /* All pseudo elements are
     abs. positioned and on bottom */
  position: absolute;
  bottom: 0;
}
/* Only the first, last, and active
   tabs need pseudo elements at all */
.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before,
.tabs .active a:after, .tabs .active a:before {
  content: "";
}
.tabs .active:before, .tabs .active:after {
  background: white; 

  /* Squares below circles */
  z-index: 1;
}
/* Squares */
.tabs li:before, .tabs li:after {
  background: #ddc385;
  width: 10px;
  height: 10px;
}
.tabs li:before {
  left: -10px;
}
.tabs li:after {
  right: -10px;
}
/* Circles */
.tabs li a:after, .tabs li a:before {
  width: 20px;
  height: 20px;
  /* Circles are circular */
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  background: #222;

  /* Circles over squares */
  z-index: 2;
}
.tabs .active a:after, .tabs .active a:before {
  background: #ddc385;
}
/* First and last tabs have different
   outside color needs */
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
  background: #222;
}
.tabs li a:before {
  left: -20px;
}
.tabs li a:after {
  right: -20px;
}

対応ブラウザは:after, :beforeを使用しているのでIE8以下は適用されず、角丸無しのスタイルになります。