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

シンプルなHTMLでどのように角丸のタブを実装するか、分かりやすいイラストを交えたチュートリアルを紹介します。

デモのキャプチャ

Tabs with Round Out Borders
デモページ

[ad#ad-2]

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以下は適用されず、角丸無しのスタイルになります。

sponsors

top of page

©2018 coliss