CSSを使ってタブの見た目だけを作る

このような見た目のタブをHTMLとCSSで作成します。見た目だけです。

HTML

まずはHTMLから。

HTML

<!-- tab -->
<div class="c-tabs_wrap">
    <ul class="c-tabs_list">
        <li class="c-tabs_item is-current"><span>アクティブなタブ</span></li>
        <li class="c-tabs_item"><a href="">クリックできるタブ</a></li>
        <li class="c-tabs_item"><a href="">クリックできるタブ</a></li>
        <li class="c-tabs_item is-disabled"><span>使用できないタブ</span></li>
        <li class="c-tabs_item is-disabled"><span>使用できないタブ</span></li>
    </ul>
</div>
<!-- ./tab -->

ポイントは.is-currentや.is-disabledをつけるだけでタブの見た目を変えること。JSで制御しやすくなります。
c-tabs_wrapは今回は特に使用しませんが全体の余白の設定とかで使うと良いかもしれませんね。

CSS

タブ全体のレイアウト

まずはタブアイテムを横並びにします。
flexboxを使用するとタブアイテム内のテキストの行数に関係なく高さを揃えることができます。

CSS

/* タブアイテムを横並びにする */
.c-tabs_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

タブグループの下部にグレーの線をひきます。疑似要素を使って線を作り、z-indexの設定もしておきます。

CSS

/* タブグループの下部にグレーの線をひく */
.c-tabs_list::after {
    background-color: #8598a7;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

タブアイテムの基本デザイン(青い背景のやつ)

タブアイテムの基本デザインを設定します。
flexboxを使用しているのは、文字を常に上下中央に配置したいから。こうすることにより、もしタブ内のテキストが2行になっても大丈夫。

CSS

/* タブアイテムの形状を設定 */
.c-tabs_item {
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

/* タブアイテムのデザインを設定 */
.c-tabs_item a,
.c-tabs_item span {
    -ms-flex-direction: column;
    -ms-flex-pack: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    background-color: #004bb1;
    border: 1px solid #004bb1;
    border-bottom-color: #fff;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    font-weight: 600;
    height: 100%;
    justify-content: center;
    line-height: 1.2;
    min-height: 2.8em;
    min-width: 8em;
    padding: 0.3em 0.8em;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

リンクが貼られているタブアイテムにマウスオンした場合の設定も入れておきましょう。

CSS

/* マウスオン時の設定 */
.c-tabs_item a:hover {
    opacity: 0.6;
}

アクティブなタブのデザイン

アクティブタブのデザインの設定を行います。is-currentクラスを付与したときのデザインです。
z-indexの値を他の要素よりも大きくして、一番手前に持ってくることで、いい感じにグレーの下線を隠してくれますよ。

CSS

/* 要素を一番手前に持ってくる */
.c-tabs_item.is-current {
    z-index: 11;
}

/* タブのデザイン設定 */
.c-tabs_item.is-current::before {
    background-color: #004bb1;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.c-tabs_item.is-current span {
    background-color: #fff;
    border: 1px solid #8598a7;
    border-bottom-color: #fff;
    color: #004bb1;
}

使用できないタブ（グレーアウトしてるやつ）

最後に使用できないタブのデザインを設定します。

CSS

.c-tabs_item.is-disabled span {
    background-color: #dbe0e5;
    border: 1px solid #c7cfd8;
    border-bottom-color: #fff;
    color: #5f6368;
}

これで完成です。文字の長さや行数が変わっても大きく崩れることはありません。
HTMLはなるべくシンプルに、CSSはなるべく柔軟性をもたせて書くのが大事です。

このHTMLをもとに、さくっと切り替えができるJSもそのうち書こうと思います。以上です。