読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

タブパネル

タブパネル

  • 狭いスペースで多くのコンテンツを見せる手法
  • 最初に見えているタブ以外は見えていない「隠しコンテンツ」です
  • パネル内容がスクロールするような長いものは適しません
  • ユーザビリティが損なわれる場合は、採用しないようにしましょう
  • CSSで「display: none」を利用して非表示にしたものを、「display: block」に切り替えて表示するDOMの操作



コーディングのポイント
  • タブの切り替えは複数のコンテンツの表示/非表示を操作してコンテンツの変化を見せる
  • 要素を非表示にするにはhide()メソッドを、表示にはshow()メソッドを使う
  • コードレベルでパネルの順番とコンテンツの順番が比例している場合は、index()メソッドで何番目の要素が選択されたかを取得して、その番号のコンテンツを表示させる
タブパネルを作成する
  • 文書構造として「見出し+段落」の形にする
  • 画像のダミースペースを入れる


PLACEHOLD.IT

https://placehold.it/

<div class="tab">
<div class="tabBox">
  <h2 class="tabMenu">お知らせ</h2>
  <p>ここにお知らせの内容が入ります。ここにお知らせの内容が入ります。ここにお知らせの内容が入ります。</p>
  <p><img src="http://placehold.it/456x150"></p>
</div><!-- /.tabBox -->
<div class="tabBox">
  <h2 class="tabMenu">行事案内</h2>
  <p>ここに行事案内の内容が入ります。ここに行事案内の内容が入ります。ここに行事案内の内容が入ります。</p>
  <p><img src="http://placehold.it/456x150"></p>
</div><!-- /.tabBox -->
<div class="tabBox">
  <h2 class="tabMenu">ブログ</h2>
  <p>ここにブログの内容が入ります。ここにブログの内容が入ります。ここにブログの内容が入ります。</p>
  <p><img src="http://placehold.it/456x150"></p>
</div><!-- /.tabBox -->
</div><!-- /.tab -->



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タブパネル</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</head>
<body>
<div id="container">
<h1>タブパネル</h1>
<div class="tab">
<div class="tabBox">
<h2 class="tabMenu">お知らせ</h2>
<p>ここにお知らせの内容が入ります。ここにお知らせの内容が入ります。ここにお知らせの内容が入ります。</p>
<p><img src="http://placehold.it/456x150"></p>
</div><!-- /.tabBox -->
<div class="tabBox">
<h2 class="tabMenu">行事案内</h2>
<p>ここに行事案内の内容が入ります。ここに行事案内の内容が入ります。ここに行事案内の内容が入ります。</p>
<p><img src="http://placehold.it/456x150"></p>
</div><!-- /.tabBox -->
<div class="tabBox">
<h2 class="tabMenu">ブログ</h2>
<p>ここにブログの内容が入ります。ここにブログの内容が入ります。ここにブログの内容が入ります。</p>
<p><img src="http://placehold.it/456x150"></p>
</div><!-- /.tabBox -->
</div><!-- /.tab -->
</div><!-- /#container -->
</body>
</html>


《style.css

@charset "UTF-8";

/* reset
----------------------------------------------------------------------*/
html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* font-size
----------------------------------------------------------------------*/
html { font-size: 62.5%; }   /* =16px × 0.625=10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 30px; font-size: 3.0rem; }
h2 { font-size: 18px; font-size: 1.8rem; }
p { font-size: 16px; font-size: 1.6rem; }

/* body
----------------------------------------------------------------------*/
body {
  line-height: 1.5;
  text-align: center;
}

/* layout
----------------------------------------------------------------------*/
#container {
  width: 500px;
  margin: 50px auto;
  text-align: center;
}

/* heading
----------------------------------------------------------------------*/
h1 {
  margin-bottom: 20px;
}
h2 {
  font-weight: normal;
}
p {
  margin-bottom: 10px;
  text-align: left;
  line-height: 1.5;
}

/* tab
----------------------------------------------------------------------*/
.tab .menu {
  position: relative;
  margin-bottom: -2px;
  padding-left: 5px;
  z-index: 100;
  overflow: hidden;
}
.tab .menu .tabMenu a {
  display: block;
  float: left;
  position: relative;
  top: 5px;
  width: 136px;
  margin-right: 5px;
  padding: 12px 0 16px 0;
  background-image:
    -webkit-gradient( linear, left top, left bottom,
      from(#999),
      to(#666));
  background-image:
    -moz-linear-gradient( #999, #666 );
  background-image: linear-gradient( #999, #666 );
  background-color: #999;
  border: 2px solid #ccc;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  color: #FFF;
  text-align: center;
}
.tab .menu .tabMenu a.current,
.tab .menu .tabMenu a:hover {
  padding: 12px 0 16px 0;
  background: #FFF;
  top: 0;
  color: #333;
}
.tab .tabBox {
  padding: 20px 20px 10px 20px;
  border: 2px solid #CCC;
}


《tab.js》

$(function(){
  $('.tab').prepend('<div class="menu"></div>');
  $('.menu').prepend($('.tabMenu'));
  $('.tabMenu').wrapInner('<a href="javascript: void(0);"></a>');

  var current = 0;
  var show = $('.tab .tabBox').eq(current);
  $('.tab .tabBox').not(show).hide();
  $('.tab .tabMenu').eq(current).find('a').addClass('current');

  $('.menu a').on('click', function(){
    $('.tab .tabBox').hide().eq($('.menu a').index(this)).show();
    $('.tab .tabMenu a').removeClass('current');
    $(this).addClass('current');
    return false;
  });
});
ナビゲーションを作成する
$(function(){
  $('.tab').prepend('<div class="menu"></div>');
  $('.menu').prepend($('.tabMenu'));
  $('.tabMenu').wrapInner('<a href="javascript: void(0);"></a>');
});


prepend()メソッド

  • 要素内の先頭にコンテンツを作成します
  1. 「.tab」が指定された要素内の先頭に「<div class="menu"></div>」(.menuが指定されたdiv)を作成する
  2. 次に追加された「<div class="menu"></div>」内に「.tabMenu」が指定された要素を移動する




  1. 「.tabMenu」が指定された要素の子要素をa要素で囲みます。このa要素はナビゲーションにマウスオーバーした際にCSSの「:hover」擬似クラスを動作させるために記述します



wrapInner()メソッド

  • 参照した要素の子要素を指定した要素で囲みます
  • wrap()メソッドは、参照した要素を指定した要素で囲みます


javascript: void(0)

  • javascript:」はURIスキームのひとつで、「avascript:擬似プロトコルjavascript: pseudo protocol)」と呼ばれます
  • 「void()」は「void演算子」と呼ばれ、与えられた式(expression)を評価し、undefinedを返すための演算子です
  • 「void(0)」は「0を無効にする」処理
  • 「void(expression)」はundefinedを返すため、expressionを評価してもページの遷移などは行われません
はじめに表示されるコンテンツを設定する
  • not()メソッドを使い、変数showで設定した要素以外をhide()メソッドで非表示にしています
  • 変数currentの値が「0」となっているため、変数showの中には1つ目の「.tabBox」が入っています
  • つまり、1つ目のタブ以外は非表示にする
  var current = 0;
  var show = $('.tab .tabBox').eq(current);
  $('.tab .tabBox').not(show).hide();
  $('.tab .tabMenu').eq(current).find('a').addClass('current');
  1. not()メソッドは、要素参照から指定した条件の要素を除外します
  2. eq()メソッドは、要素参照のなかからして下順番になる要素を指定します
  3. hide()メソッドは、参照した要素を非表示にします
  4. 要素の順番は「0」から開始されるため、1つ目の要素を指定する場合は「0」とします
  5. addClass()メソッドは、参照した要素に指定したクラス名を追加します
コンテンツを切り替える
  • 参照した要素をクリックしたときに実行される
  • 「.tabBox」が指定された要素を一度すべて非表示にして、その後選択したナビゲーションの順番に対応したコンテンツをshow()メソッドで表示します


選択したナビゲーションの順番を決める

  • index()メソッドを利用する
  • index()メソッドは、参照した要素のなかから指定された要素の順番を取得します
  • 選択された要素の順番を求める「$('.menu a').index(this)」
  • この「this」が「clickイベントを発生させた要素」という意味
  • 一度すべてのクラス名「current」を削除し、選択されたナビゲーションにクラス名「current」を追加し直します
  • 「return false;」で、a要素がクリックされたときのページ移動の動作を無効化しています
  $('.menu a').on('click', function(){
    $('.tab .tabBox').hide().eq($('.menu a').index(this)).show();
    $('.tab .tabMenu a').removeClass('current');
    $(this).addClass('current');
    return false;
  });
  • 「return false;」は、a要素の挙動を無効化するためだけなのですから、以下のように記述しても問題ありません。(a要素のhref属性を、遷移をおこなわない値にしておく)
$(function(){
  $('.tab').prepend('<div class="menu"></div>');
  $('.menu').prepend($('.tabMenu'));
  $('.tabMenu').wrapInner('<a href="#"></a>');

  var current = 0;
  var show = $('.tab .tabBox').eq(current);
  $('.tab .tabBox').not(show).hide();
  $('.tab .tabMenu').eq(current).find('a').addClass('current');

  $('.menu a').click(function(){
    $('.tab .tabBox').hide().eq($('.menu a').index(this)).show();
    $('.tab .tabMenu a').removeClass('current');
    $(this).addClass('current');
    return false;
  });
});


広告を非表示にする