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

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

タブパネル - 実践

jQuery

基本のタブパネルの作り方

  • タブ(見出し)とパネル(表示する内容)をそれぞれ別のリストで記述します
  • タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます
  • パネル部とタブ部が連動するよう「id名」をつけ、href属性に#(ハッシュ)をつけたid名を記述します
  • 初期状態で表示するタブには、a要素にclass属性「selected」を設定しておきます
JavaScript
CSS
HTML
jQuery
XHTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue elit eu mauris sollicitudin dictum. Phasellus nec felis ut arcu placerat tincidunt. Vestibulum luctus mauris ac ante molestie eleifend. Quisque dapibus nulla ac purus volutpat posuere a quis nisl. Nam condimentum purus vitae nibh feugiat imperdiet. Cras purus mi, egestas vitae imperdiet volutpat, suscipit nec odio. Maecenas elementum aliquam metus nec ultrices. Suspendisse potenti. Praesent lobortis gravida massa in volutpat. Nunc id mauris id orci congue malesuada. Aliquam vel mauris risus, sit amet laoreet sapien. 

Nam cursus molestie erat, a sodales erat sollicitudin ut. Maecenas nec urna mi, eu congue turpis. Duis vitae volutpat lorem. Ut vulputate tempor elit, vitae iaculis elit sollicitudin at. Ut gravida fermentum tempor. Mauris metus ante, volutpat et porta a, malesuada vel purus. In lobortis ullamcorper lorem eu malesuada. Nullam sollicitudin, urna eu euismod suscipit, eros sapien adipiscing arcu, sit amet ultricies lacus elit sed urna. Nam scelerisque, nulla eu mollis elementum, ipsum tortor ullamcorper felis, eget laoreet diam turpis dignissim metus. 

Pellentesque in metus leo. Praesent porta, dolor nec mattis ullamcorper, velit purus mollis enim, nec tincidunt magna massa ornare elit. In ipsum enim, pellentesque vitae gravida ultrices, aliquet nec ante. Mauris sed nunc ut ligula dictum convallis vel et nunc. Aenean eget enim vitae nulla lacinia consequat. Quisque blandit, ante vel sodales sollicitudin, neque ante elementum leo, ut consequat dui risus ut purus. Vestibulum viverra lacus at felis dignissim bibendum. Maecenas interdum nisl eu metus porta luctus. Suspendisse nulla neque, ultricies nec facilisis nec, mollis id sapien.

Vestibulum a quam scelerisque odio ultricies mollis eget a leo. Morbi dictum, velit lobortis hendrerit tincidunt, lacus nisl rhoncus felis, commodo sollicitudin magna augue non est. Nunc in felis quis purus dignissim blandit vel ut erat. In hac habitasse platea dictumst. Nullam euismod auctor rhoncus. Proin et sem ac neque placerat vulputate. Nullam consequat purus eget libero posuere pulvinar. Aenean luctus luctus leo nec vehicula. Praesent eleifend nibh sed neque vestibulum hendrerit. Nulla suscipit vehicula sem, quis congue ligula gravida vel. 

Vestibulum consequat consequat aliquet. Aenean ut nunc dolor, vel dictum mauris. Proin neque eros, tincidunt at faucibus a, dapibus sit amet tellus. Etiam rutrum pharetra risus porta ullamcorper. Nunc convallis orci at massa suscipit porta. Sed interdum suscipit dui, eu sodales odio fermentum vitae. Nunc vitae dui metus, a laoreet ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 


  tab_selected.jpg


  tab.jpg




《tab.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネル</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.2.1.min.js"></script>
<body>
<div id="container">

<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">XHTML</a></li>
</ul>

<ul class="panel">

<li id="tab1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue elit eu mauris sollicitudin dictum. Phasellus nec felis ut arcu placerat tincidunt. Vestibulum luctus mauris ac ante molestie eleifend. Quisque dapibus nulla ac purus volutpat posuere a quis nisl. Nam condimentum purus vitae nibh feugiat imperdiet. Cras purus mi, egestas vitae imperdiet volutpat, suscipit nec odio. Maecenas elementum aliquam metus nec ultrices. Suspendisse potenti. Praesent lobortis gravida massa in volutpat. Nunc id mauris id orci congue malesuada. Aliquam vel mauris risus, sit amet laoreet sapien. 
</li>

<li id="tab2">
Nam cursus molestie erat, a sodales erat sollicitudin ut. Maecenas nec urna mi, eu congue turpis. Duis vitae volutpat lorem. Ut vulputate tempor elit, vitae iaculis elit sollicitudin at. Ut gravida fermentum tempor. Mauris metus ante, volutpat et porta a, malesuada vel purus. In lobortis ullamcorper lorem eu malesuada. Nullam sollicitudin, urna eu euismod suscipit, eros sapien adipiscing arcu, sit amet ultricies lacus elit sed urna. Nam scelerisque, nulla eu mollis elementum, ipsum tortor ullamcorper felis, eget laoreet diam turpis dignissim metus. 
</li>

<li id="tab3">
Pellentesque in metus leo. Praesent porta, dolor nec mattis ullamcorper, velit purus mollis enim, nec tincidunt magna massa ornare elit. In ipsum enim, pellentesque vitae gravida ultrices, aliquet nec ante. Mauris sed nunc ut ligula dictum convallis vel et nunc. Aenean eget enim vitae nulla lacinia consequat. Quisque blandit, ante vel sodales sollicitudin, neque ante elementum leo, ut consequat dui risus ut purus. Vestibulum viverra lacus at felis dignissim bibendum. Maecenas interdum nisl eu metus porta luctus. Suspendisse nulla neque, ultricies nec facilisis nec, mollis id sapien.
</li>

<li id="tab4">
Vestibulum a quam scelerisque odio ultricies mollis eget a leo. Morbi dictum, velit lobortis hendrerit tincidunt, lacus nisl rhoncus felis, commodo sollicitudin magna augue non est. Nunc in felis quis purus dignissim blandit vel ut erat. In hac habitasse platea dictumst. Nullam euismod auctor rhoncus. Proin et sem ac neque placerat vulputate. Nullam consequat purus eget libero posuere pulvinar. Aenean luctus luctus leo nec vehicula. Praesent eleifend nibh sed neque vestibulum hendrerit. Nulla suscipit vehicula sem, quis congue ligula gravida vel. 
</li>

<li id="tab5">
Vestibulum consequat consequat aliquet. Aenean ut nunc dolor, vel dictum mauris. Proin neque eros, tincidunt at faucibus a, dapibus sit amet tellus. Etiam rutrum pharetra risus porta ullamcorper. Nunc convallis orci at massa suscipit porta. Sed interdum suscipit dui, eu sodales odio fermentum vitae. Nunc vitae dui metus, a laoreet ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
</li>

</ul>

</div>
</body>
</html>


この時点でのプレビューは、ページ内リンクとして稼働します。

CSSの記述
  • stye.cssを外部リンク
  • タブ部分(ul.tab li)は、floatを利用して横一列に並べる
  • a要素を「display: block」でブロックレベル要素に変更してクリックしやすくする
  • タブが選択された状態のデザインを「a.selected」で定義し、背景画像を「tab_selected.jpg」に変更します
  • haikei


(1)リセットの記述

/* reset */
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}


(2)レイアウトの記述

/* layout */
#container {
  width: 500px;
  margin: 50px auto;
}


(3)タブの記述

/* tab */
ul.tab li {
  width: 100px;
  height: 40px;
  float: left;
}
ul.tab li a {
  background: url("../img/tab.jpg");
  display: block;
  color: blue;
  line-height: 40px;
  text-align: center;
  overflow: hidden;
}
ul.tab li a.selected {
  background: url("../img/tab_selected.jpg");
  color: #333;
  cursor: pointer;
}


(4)タブの記述

/* panel */
ul.panel {
  border: 1px solid #9FB7D4;
  border-top: none;
  overflow: hidden;
}
ul.panel li {
  padding: 16px;
  color: #333;
}
jQueryの記述
<script>
$(function(){
  $( 'ul.panel li:not( '+$( 'ul.tab li a.selected' ).attr( 'href' )+' )' ).hide();
  $( 'ul.tab li a' ).click(function(){
    $( 'ul.tab li a.selected' ).removeClass( 'selected' );
    $(this).addClass( 'selected' );
    $( 'ul.panel li' ).hide();
    $($(this).attr( 'href' )).show();
    return false;
  });
});
</script>


タブパネルの初期表示状態の設定

  • CSSの記述まででは、すべてのパネルが展開した状態ですから、選択状態のパネル(a要素)のclass属性が「selected」のタブに対応するパネル以外を「hide()」で非表示にします
  • li要素の後に、否定擬似クラスの「:not()」がついているので、この場合はid属性に「#tab1」がついたパネル以外が「hide()」で非表示になります
$( 'ul.panel li:not( '+$( 'ul.tab li a.selected' ).attr( 'href' )+' )' ).hide();
  • 分解すると文字列の連結になります
$(
  'ul.panel li:not('
  +
  $( 'ul.tab li a.selected' ).attr( 'href' )
  +
  ')'
).hide();


書き換えると、

$( 'ul.panel li' ).hide();
$( $( 'ul.tab li a.selected' ).attr( 'href' ) ).show();


タブがクリックされたときのイベントの設定

  • a要素に設定する場合は、「return false;」を忘れずに記述する
  $( 'ul.tab li a' ).click(function(){

    return false;
  });
  • タブがクリックされたとき、class属性「selected」がついていたところから削除し、クリックされたところに追加します
    $( 'ul.tab li a.selected' ).removeClass( 'selected' );
    $(this).addClass( 'selected' );
  • すべてのぱねるを非表示にします
  • 「$(this).attr( 'href' )」でクリックされたa要素のhref属性の値を取得して、値と同じ名前のid属性をもつパネルをshow()で表指示ます
    $( 'ul.panel li' ).hide();
    $($(this).attr( 'href' )).show();


和食器
洋食器
ガラス食器

湯呑み
急須
小鉢

YUNOMI
湯呑み画像
モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。

KYUSU
急須画像
モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。

KOBACHI
小鉢画像
モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。

Copyright (c) 2014 tableware All Right Reserved.


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UF-8">
<title>タブメニュー</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function () {
  $( '#content section' ).hide();
  $( $( '#tab a.selected' ).attr( 'href' )).show();
  $( '#tab li a').on( 'click' , function () {
    $( '#tab li a').removeClass();
    $( this ).addClass( 'selected' );
    $( '#content section ').hide();
    $( $(this).attr( 'href ') ).fadeIn();
    return false;
  });
});
</script>
</head>
<body>
<header>
<div id="header-inner">
<div id="logo">
<img src="img/logo.png" alt="tableware">
</div>
<ul id="nav">
<li><a href="#"><img src="img/menu1.png" alt="和食器"></a></li>
<li><a href="#"><img src="img/menu2.png" alt="洋食器"></a></li>
<li><a href="#"><img src="img/menu3.png" alt="ガラス食器"></a></li>
</ul>
</div><!-- /#nav-->
<ul id="tab">
<li><a href="#tab1" class="selected">湯呑み</a></li>
<li><a href="#tab2">急須</a></li>
<li><a href="#tab3">小鉢</a></li>
</ul><!-- /#tab-->
</header><!-- /header -->
<div id="content">
<section id="tab1">
<h1>YUNOMI</h1>
<img src="img/yunomi.jpg" alt="湯呑み画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
<section id="tab2">
<h1>KYUSU</h1>
<img src="img/kyusu.jpg" alt="急須画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
<section id="tab3">
<h1>KOBACHI</h1>
<img src="img/kobachi.jpg" alt="小鉢画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
</div><!-- /#content-->
<footer>
<small>Copyright (c) 2014 tableware All Right Reserved.</small>
</footer><!-- /footer-->
</body>
</html>


《style.css

@charset "UTF-8";

/* ------- reset ------- */

body, div, ul, li {
  margin:0;
  padding:0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #292623;
}
img {
  border:0;
  vertical-align: bottom;
}

/* ------- base ------- */
body {
  background-color: #FFF;
  font-size: 16px;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #292623;
}

/* ------- header ------- */
header {
  width:100%;
  height: 120px;
  background: url(../img/bg.png) repeat-x 0 bottom #D8D8C5;
}
#header-inner {
  width: 700px;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
}
#logo {
  float: left;
  padding-top: 17px;
}

/* ------- nav ------- */
#nav {
  float: right;
  padding-top: 37px;
}
#nav li {
  float: left;
  padding-left: 15px;
}

/* ------- tab ------- */
#tab {
  width: 700px;
  height: 40px;
  margin: 0 auto;
}
#tab li {
  float: left;
  margin-right: 3px;
}
#tab li a {
  display:block;
  width: 120px;
  height: 34px;
  padding-top: 6px;
  font-size: 1.3em;
  text-align:center;
  background-color: #494941;
  color:#FFF;
}
#tab li a:hover {
  background-color: #747468;
  color:#FFF;
}
#tab li a.selected {
  background-color: #FFF;
  color:#292623;
}

/* ------- content ------- */
#content {
  width: 620px;
  margin: 50px auto;
}
section h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.4em;
}
section p {
  width: 390px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 2.0;
}

/* ------- footer ------- */
footer {
  width:100%;
  height: 35px;
  background-color: #494941;
  padding-top:23px;
  text-align:center;
  color:#CCC;
  position:fixed;
  bottom:0;
}
広告を非表示にする