CSSで作ったタブを切り替える

Webサイトのお知らせなどのカテゴリが複数ある時は、タブを切り替えて表示させるのが一般的かと思います。

今回はCSSで作ったタブを、jqueryを使用して切り替える方法をご紹介いたします。

サンプル
ソースと解説
まとめ

サンプル

まずはサンプルをご覧ください。

サンプル

ソースと解説

ソースはjs、html、cssの3つとなります。

js

$(function() {

    $("#tab li").click(function() {

        var num = $("#tab li").index(this);

        $(".box").addClass('d_none');

        $(".box").eq(num).removeClass('d_none');

        $("#tab li").removeClass('select');

        $(this).addClass('select')

    });

});

「#tab」の「li」をクリックしたときにタブとタブの配下にある内容を切り替えています。

「addClass」と「removeClass」により「select」のクラスを加える、または取り去り、タブについている「▼(逆三角形)」の非表示を行っています。

html

タブとタブの内容に分かれています。

<ul id="tab" class="clearfix">
    <li class="tab1 select">タブ1</li>
    <li class="tab2">タブ2</li>
    <li class="tab3">タブ3</li>
    <li class="tab4">タブ4</li>
</ul>
<div class="box">
    <p>タブ1の内容</p>
</div>
<div class="box d_none">
    <p>タブ2の内容</p>
</div>
<div class="box d_none">
    <p>タブ3の内容</p>
</div>
<div class="box d_none">
    <p>タブ4の内容</p>
</div>

タブの部分です。

<ul id="tab" class="clearfix">
    <li class="tab1 select">タブ1</li>
    <li class="tab2">タブ2</li>
    <li class="tab3">タブ3</li>
    <li class="tab4">タブ4</li>
</ul>

タブの内容部分です。

<div class="box">
    <p>タブ1の内容</p>
</div>
<div class="box d_none">
    <p>タブ2の内容</p>
</div>
<div class="box d_none">
    <p>タブ3の内容</p>
</div>
<div class="box d_none">
    <p>タブ4の内容</p>
</div>

css

デフォルトの打ち消しと、タブ、タブの内容部分、フロートをサポートするクリアフィックスの部分に分かれます。

#tab,
#tab li {
    margin: 0;
    padding: 0;
}

#tab li {
    position: relative;
    list-style-type: none;
    cursor: pointer;
    float: left;
    width: 25%;
    height: 25px;
    padding: 10px 0;
    font-size: 20px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#tab li.tab1 {
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(169,3,41) 0%, rgb(109,0,25) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

#tab li.tab2 {
    background: rgb(59,107,78); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(59,107,78) 0%, rgb(0,109,45) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(59,107,78) 0%,rgb(0,109,45) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(59,107,78) 0%,rgb(0,109,45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b6b4e', endColorstr='#006d2d',GradientType=0 ); /* IE6-9 */
}

#tab li.tab3 {
    background: rgb(0,183,234); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(0,183,234) 0%, rgb(0,158,195) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(0,183,234) 0%,rgb(0,158,195) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(0,183,234) 0%,rgb(0,158,195) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

#tab li.tab4 {
    background: rgb(73,192,240); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,192,240) 0%, rgb(44,175,227) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(73,192,240) 0%,rgb(44,175,227) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(73,192,240) 0%,rgb(44,175,227) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */
}

#tab li:before {
    width: 0;
    height: 0;
    margin-left: -10px;
    padding: 0;
    border: 10px solid transparent;
    content: "";
    position: absolute;
    top: 44px;
    left: 50%;
}

#tab li.tab1.select:before {
    border-top: 10px solid #6D0019;
}

#tab li.tab2.select:before {
    border-top: 10px solid #006D2D;
}

#tab li.tab3.select:before {
    border-top: 10px solid #009ED3;
}

#tab li.tab4.select:before {
    border-top: 10px solid #2CAFE3;
}

.box.d_none {
    display: none;
}

.box {
    padding: 10px;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    overflow: visible;
    zoom: 1;
}

デフォルトのスタイルを打ち消しています。

#tab,
#tab li {
    margin: 0;
    padding: 0;
}

タブの基本プロパティです。

#tab li {
    position: relative;
    list-style-type: none;
    cursor: pointer;
    float: left;
    width: 25%;
    height: 25px;
    padding: 10px 0;
    font-size: 20px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

タブ1からタブ4の色を指定しています。色はCSS3で「CSS3のグラデーションのプロパティを生成する Ultimate CSS Gradient Generator」の記事で紹介した「Ultimate CSS Gradient Generator」で作りました。

#tab li.tab1 {
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(169,3,41) 0%, rgb(109,0,25) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

#tab li.tab2 {
    background: rgb(59,107,78); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(59,107,78) 0%, rgb(0,109,45) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(59,107,78) 0%,rgb(0,109,45) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(59,107,78) 0%,rgb(0,109,45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b6b4e', endColorstr='#006d2d',GradientType=0 ); /* IE6-9 */
}

#tab li.tab3 {
    background: rgb(0,183,234); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(0,183,234) 0%, rgb(0,158,195) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(0,183,234) 0%,rgb(0,158,195) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(0,183,234) 0%,rgb(0,158,195) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

#tab li.tab4 {
    background: rgb(73,192,240); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,192,240) 0%, rgb(44,175,227) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(73,192,240) 0%,rgb(44,175,227) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(73,192,240) 0%,rgb(44,175,227) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */
}

「li」の「:before」疑似要素でタブの「▼(逆三角形)」を表現しています。

#tab li:before {
    width: 0;
    height: 0;
    margin-left: -10px;
    padding: 0;
    border: 10px solid transparent;
    content: "";
    position: absolute;
    top: 44px;
    left: 50%;
}

#tab li.tab1.select:before {
    border-top: 10px solid #6D0019;
}

#tab li.tab2.select:before {
    border-top: 10px solid #006D2D;
}

#tab li.tab3.select:before {
    border-top: 10px solid #009ED3;
}

#tab li.tab4.select:before {
    border-top: 10px solid #2CAFE3;
}

タブの内容を装飾しています。「.box.d_none」はタブの内容の非表示ように使用しています。

.box.d_none {
    display: none;
}

.box {
    padding: 10px;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

タブの「li」をフロートしているので、「clearfix」で高さを整えています。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    overflow: visible;
    zoom: 1;
}

全ソース

jqueryは「jquery-1.11.3.min.js」を使用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>
    CSSで作ったタブを切り替える
</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {

    $("#tab li").click(function() {

        var num = $("#tab li").index(this);

        $(".box").addClass('d_none');

        $(".box").eq(num).removeClass('d_none');

        $("#tab li").removeClass('select');

        $(this).addClass('select')

    });

});
</script>
<style type="text/css">
#tab,
#tab li {
    margin: 0;
    padding: 0;
}

#tab li {
    position: relative;
    list-style-type: none;
    cursor: pointer;
    float: left;
    width: 25%;
    height: 25px;
    padding: 10px 0;
    font-size: 20px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#tab li.tab1 {
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(169,3,41) 0%, rgb(109,0,25) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

#tab li.tab2 {
    background: rgb(59,107,78); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(59,107,78) 0%, rgb(0,109,45) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(59,107,78) 0%,rgb(0,109,45) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(59,107,78) 0%,rgb(0,109,45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b6b4e', endColorstr='#006d2d',GradientType=0 ); /* IE6-9 */
}

#tab li.tab3 {
    background: rgb(0,183,234); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(0,183,234) 0%, rgb(0,158,195) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(0,183,234) 0%,rgb(0,158,195) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(0,183,234) 0%,rgb(0,158,195) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

#tab li.tab4 {
    background: rgb(73,192,240); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,192,240) 0%, rgb(44,175,227) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(73,192,240) 0%,rgb(44,175,227) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(73,192,240) 0%,rgb(44,175,227) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */
}

#tab li:before {
    width: 0;
    height: 0;
    margin-left: -10px;
    padding: 0;
    border: 10px solid transparent;
    content: "";
    position: absolute;
    top: 44px;
    left: 50%;
}

#tab li.tab1.select:before {
    border-top: 10px solid #6D0019;
}

#tab li.tab2.select:before {
    border-top: 10px solid #006D2D;
}

#tab li.tab3.select:before {
    border-top: 10px solid #009ED3;
}

#tab li.tab4.select:before {
    border-top: 10px solid #2CAFE3;
}

.box.d_none {
    display: none;
}

.box {
    padding: 10px;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    overflow: visible;
    zoom: 1;
}
</style>
</head>
<body>

<h1>
    CSSで作ったタブを切り替える
</h1>

<ul id="tab" class="clearfix">
    <li class="tab1 select">タブ1</li>
    <li class="tab2">タブ2</li>
    <li class="tab3">タブ3</li>
    <li class="tab4">タブ4</li>
</ul>
<div class="box">
    <p>タブ1の内容</p>
</div>
<div class="box d_none">
    <p>タブ2の内容</p>
</div>
<div class="box d_none">
    <p>タブ3の内容</p>
</div>
<div class="box d_none">
    <p>タブ4の内容</p>
</div>

</body>
</html>

まとめ

ソースはjs、html、cssの3つ。
「addClass」と「removeClass」により「select」のクラスを加える、または取り去り、タブについている「▼(逆三角形)」の非表示を行っている。
タブの色はCSS3で表示。
「li」の「:before」疑似要素でタブの「▼(逆三角形)」を表現。
「clearfix」でフロートによる高さを整えている。
jqueryは「jquery-1.11.3.min.js」を使用。

。タブの表示に関してはCSS3で表現しているので、比較的新しいブラウザに限定されます。

今回は行いませんでしたが、タブの保持なども「jquery.cookie.js」を使えば容易に行うことができます。