CSSでタブ切り替えする方法

CSSでタブ切り替えする方法

Posted at March 18,2015 1:55 AM
Tag:[CSS]

CSSでタブ切り替えを実現する方法を紹介します。

CSSでタブ切り替え

1.はじめに

:target擬似クラスのまとめ」でエントリーしたとおり、リンク先のコンテンツのスタイルをCSSで変更することが可能になりました。

この擬似クラスを使って、これまでjQueryなどで実現していたタブ切り替えをCSSだけで行うことができるようになります。

ということで、簡単なサンプルを作ってみました。

サンプル

このサンプルは「CSS3-Only Tabbed Area」に掲載されていたものをベースに、必要最小限な内容に修正したものです。

動作はFirefoxとChromeで確認しています。

2.ソースコード

サンプルのソースコードは下記のとおりです。ざっくりですがCSSの各セレクタには役割をコメントでいれてます。

<meta charset="UTF-8" />
<style>
* { margin: 0; padding: 0; }
body { margin-left: 20px; }
 
/* タブのスタイル */
.tabs {
    list-style: none;
}
.tabs li {
    display: inline;
}
.tabs li a {
    color: black;
    float: left;
    display: block;
    padding: 4px 10px;
    margin-left: -1px;
    position: relative;
    left: 1px;
    background: white;
    text-decoration: none;
}
.tabs li a:hover {
    background: #ccc;
}
 
/* 全体の幅とマージン */
.tabbed-area {
    width: 300px;
    margin: 0 0 120px 0;
}
 
/* 配置と高さ */
.box-wrap {
    position: relative;
    min-height: 150px;
}
 
/* タブコンテンツのスタイル */
.tabbed-area div div {
    background: white;
    padding: 20px;
    min-height: 150px;
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
}
 
/* 選択したタブの配色 */
.tabbed-area div div, .tabs li a {
    border: 1px solid #ccc;
}
 
/* タブエリアの位置 */
.cur-nav-fix {
    margin-top: 50px;
}
 
/* タブの位置 */
.cur-nav-fix .tabs {
    position: absolute;
    bottom: 100%;
    left: -1px;
}
 
/* タブの背景(Firefox) */
.cur-nav-fix .tabs li a {
    background: -moz-linear-gradient(top, white, #eee);
}
 
/* クリックしたタブの罫線 */
.cur-nav-fix .tabs li.cur a {
    border-bottom: 1px solid #fff; background: #fff;
}
 
/* タブをクリックしたときのタブの重なり順序 */
#box-one:target .tabs, #box-two:target .tabs, #box-three:target .tabs {
    z-index: 2;
}
 
/* タブをクリックしたときの全体の重なり順序 */
#box-one:target, #box-two:target, #box-three:target {
    z-index: 1;
}
</style>
 
<div class="tabbed-area cur-nav-fix">
  <div class="box-wrap">
    <div id="box-one">
      <p>テスト1</p>
      <ul class="tabs">
        <li class="cur"><a href="#box-one">タブ1</a></li>
        <li><a href="#box-two">タブ2</a></li>
        <li><a href="#box-three">タブ3</a></li>
      </ul>
    </div>
    <div id="box-two">
      <p>テスト2</p>
      <ul class="tabs">
        <li><a href="#box-one">タブ1</a></li>
        <li class="cur"><a href="#box-two">タブ2</a></li>
        <li><a href="#box-three">タブ3</a></li>
      </ul>
    </div>
    <div id="box-three">
      <p>テスト3</p>
      <ul class="tabs">
        <li><a href="#box-one">タブ1</a></li>
        <li><a href="#box-two">タブ2</a></li>
        <li class="cur"><a href="#box-three">タブ3</a></li>
      </ul>
    </div>
  </div>
</div>

3.解説

ややトリッキーなテクニックですが、タブをクリックしたときのコンテンツには、通常のコンテンツ(「テスト1」の部分)に加えて、タブエリア自身(赤色部分)も含めています。

<div id="box-one">
  <p>テスト1</p>
  <ul class="tabs">
    <li class="cur"><a href="#box-one">タブ1</a></li>
    <li><a href="#box-two">タブ2</a></li>
    <li><a href="#box-three">タブ3</a></li>
  </ul>
</div>
…

タブエリアの中にあるタブをクリックすると、下記の:target擬似クラスによって、クリックされたコンテンツの中にあるタブエリアで、直前に表示されていたタブエリアを上書きするという仕組みになっています。

/* タブをクリックしたときのタブの重なり順序 */
#box-one:target .tabs, #box-two:target .tabs, #box-three:target .tabs {
    z-index: 2;
}
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)