タブメニューを作る
tab-workファイルを使用
01 画像をダウンロード
使用する写真を「PIXABAY」などからダウンロード。
ダウンロードサイズ／640px
写真の枚数／3～4枚
※写真のサイズは高さも同じになるように編集してください／width:640px height:○○○px
windowsのペイント、photoshop、iLOVEimgなどで編集
※写真の名前はph1、ph2、ph3、ph4.、・・・ にすると簡単に入れ替えられます
02 タイトルを変更
サンプルのタイトルやh1をページにマッチした名前に変更してください。
HTML
<title>季節の花</title>
<h1>季節の花</h1>
03 jQueryのリンク・JavaScript を確認
</body>の上にjQuery本体と自作script.jsを入れてあります
HTML
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
</body>
04 画像のサイズ
写真のサイズは横幅（width）640pxです
高さは自由ですが全部の高さを同じにしてください
写真はセンターに揃えるため「class="naka"」に設定しています
.naka { text-align: center; }
HTML
<p class="naka"><img src="img/ph1.jpg" alt="春の花" width="640" height="400"/></p>
05 CSSでデザインを変更
bodyやheader、ｈ1、h2、ul li など自由に変更してください
06 タブメニューのテキストを入れる
タブに表示するテキストは短かくしてください
例）01、02、・・・
※タブを少しだけ長くするには「ul li a」の箇所のwidth:100px; の数字を変更（例）width:100px;
※タブを角丸にするには「ul li a」に入れる border-radius: 15px 15px 0 0;
HTML
<ul>
<li><a href="#tab1" class="current">春</a></li>
<li><a href="#tab2">夏</a></li>
<li><a href="#tab3">秋</a></li>
<li><a href="#tab4">冬</a></li>
</ul>
07 各タブの内容を入れる
<div>～</div>で分けたグループに「タブメニューで付けたid名を入れ、タブの数に合わせて（ここでは4つ）内容を入れていく
HTML
<div id="tab1">
<h2>チューリップ</h2>
<p class="naka"><img src="img/ph1.jpg" alt="春の花" width="640" height="400"/></p>
<p>テキスト</p>
</div>
08 jQuery 確認
$(function(){
// #tab1以外を非表示にする
$('#contents div[id != "tab1"]').hide();
// タブをクリック
$("a").click(function(){
// 一度全てのコンテンツを非表示にする
$("#contents div").hide();
// 選択されたコンテンツを再表示する
$($(this).attr("href")).show();
// 現在のcurrentクラスを削除
$(".current").removeClass("current");
// 選択されたタブ（自分自身）にcurrentクラスを追加
$(this).addClass("current");
return false;
});
});
09 画像解像度の確認
最後にもう一度、画像解像度（image resolution）をチェックしてください
Important！
画像解像度が変更できていない場合が多いので必ず全ての写真を
iLOVEimg で「画像の圧縮（Compress IMAGE）」した写真をダウンロードしたものを使ってください