角丸タブを使ったタブボックスを作る(4ページ目)

今回のソースのまとめ

今回ご紹介した修正部分（HTML・スタイルシート）と、過去にご紹介した部分（HTML・スタイルシート・JavaScript）を合わせたソースを掲載しておきます。コピー＆ペーストして使ってみる際などにご活用下さい。

■スタイルシート部分：

<style type="text/css"><!--
   /* ▼表示領域全体 */
   div.tabbox {
      margin: 0px;
      padding: 0px;
      width: 400px; /* 全体の横幅 */
   }
   /* ▼タブ部分 */
   div.tabbox ul.tabs {
      margin:  0px; /* 外側の余白を消す */
      padding: 0px; /* 内側の余白を消す */
   }
   div.tabbox ul.tabs li {
      margin: 0px;  /* 各項目周囲の余白をなくす */
      padding: 0px; /* 各項目内側の余白をなくす */
      list-style-type: none; /* 先頭記号を消す */
      float: left;  /* リスト項目を横方向に並べる */
      width: 120px; /* タブのデフォルトの横幅 */
      /* 左上の角丸 */
      background-image: url("tab-base.gif");
      background-repeat: no-repeat;
      background-position: left top;
   }
   div.tabbox ul.tabs a {
      display: block;  /* ブロックレベルに */
      padding: 5px 0px;      /* 内側の余白 */
      height: 20px;          /* タブの高さ */
      text-align: center;    /* 中央寄せ */
      text-decoration: none; /* 下線を消す */
      /* 右上の角丸 */
      background-image: url("tab-right.gif");
      background-repeat: no-repeat;
      background-position: right top;
   }
   /* ▼タブ個別の色・装飾 */
   div.tabbox ul.tabs li.tab1 {
      background-color: blue; /* タブ１の色(青) */
   }
   div.tabbox ul.tabs li.tab2 {
      background-color: #aaaa00; /* タブ２の色(黄) */
   }
   div.tabbox ul.tabs li.tab3 {
      background-color: red; /* タブ３の色(赤) */
      width: 90px;           /* タブ３の横幅 */
   }
   div.tabbox ul.tabs a:link,
   div.tabbox ul.tabs a:visited {
      color: white; /* タブの文字色(白) */
   }
   div.tabbox ul.tabs a:hover {
      /* タブにマウスを載せた際の装飾 */
      color: yellow;              /* 黄色 */
      text-decoration: underline; /* 下線 */
   }

   /* ▼タブに対応するボックス領域 */
   div.tabbox div.tab {
      height: 150px;  /* ボックスの横幅 */
      overflow: auto; /* スクロールバー自動表示 */
      clear: left;    /* 回り込み解除(必須) */
   }
   div.tabbox div#tab1 {
      /* タブ１の中身(枠線と背景色) */
      border: 3px solid blue; background-color: #ccffff;
   }
   div.tabbox div#tab2 {
      /* タブ２の中身(枠線と背景色) */
      border: 3px solid #aaaa00; background-color: #ffffcc;
   }
   div.tabbox div#tab3 {
      /* タブ３の中身(枠線と背景色) */
      border: 3px solid red; background-color: #ffcccc;
   }

   /* ▼ボックス内部の装飾(今回のテクニックとは無関係) */
   div.tabbox div.tab p { margin: 0.5em; }
   div.tabbox div.tab p.tabhead {
      font-weight: bold; border-bottom: 3px double gray;
   }
--></style>

■JavaScript部分：

<script type="text/javascript"><!--
   function ChangeTab(tabname) {
      // 全部消す
      document.getElementById('tab1').style.display = 'none';
      document.getElementById('tab2').style.display = 'none';
      document.getElementById('tab3').style.display = 'none';
      // 指定箇所のみ表示
      if(tabname) {
         document.getElementById(tabname).style.display = 'block';
      }
   }
// --></script>

■HTML部分：

<div class="tabbox">
   <ul class="tabs">
      <li class="tab1"><a href="#tab1" onclick="ChangeTab('tab1'); return false;">タブ１</a></li>
      <li class="tab2"><a href="#tab2" onclick="ChangeTab('tab2'); return false;">タブ２</a></li>
      <li class="tab3"><a href="#tab3" onclick="ChangeTab('tab3'); return false;">タブ３</a></li>
   </ul>
   <div id="tab1" class="tab">
      <p class="tabhead">タブ１</p>
      <p>タブに対応するボックス（中身）</p>
   </div>
   <div id="tab2" class="tab">
      <p class="tabhead">タブ２</p>
      <p>タブに対応するボックス（中身）</p>
   </div>
   <div id="tab3" class="tab">
      <p class="tabhead">タブ３</p>
      <p>タブに対応するボックス（中身）</p>
   </div>
</div>

<script type="text/javascript"><!--
   // デフォルトのタブを選択
   ChangeTab('tab1');
// --></script>

表示例

上記のソースをすべて合わせて表示させると、以下のように見えます。

タブをクリックすると、それに応じてボックス内の表示内容が変化するはずです。（タブ３だけ幅が狭いのは、タブ３に対してだけスタイルシートで横幅を狭く（90pxに）指定しているからです。）
※タブによる表示切替は、JavaScriptが有効な環境のみ機能します。

おわりに

今回は、上部の角を丸くした（タブらしく見える）タブを使って、ページを移動することなく一瞬でボックス内の表示内容が切り替わる「タブボックス」を作る方法をご紹介いたしました。 ぜひご活用下さい。