ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

HP・ブログ関連

タブごとに内容を切り替える「タブメニュー」をホームページに作成する方法

ページを切り替えることなく、同じページ内でタブごとに表示内容を変更する「タブメニュー」の作り方について、今回簡単に紹介しようと思います!

ちなみにタブメニューとは↓のように、タブをクリックするとページ移動することなく、ボックスの中身のみが切り替わるというものです。

タブ1タブ2タブ3

 タブ1の内容です。画像やリンクを含めることもできます。
 タブ2の内容です。画像やリンクを含めることもできます。
 タブ3の内容です。画像やリンクを含めることもできます。


※ 今回の解説では、↑の実装例で示したものと同じようなスタイルのタブメニューの実装を目指します。 タブメニュー完成後のデザインの変更は各自で自由に行ってください。

① タブによる切り替え機能を実装するためのCSS行を記述

まずは肝心なタブ機能を実装するためのcss行を htmlに記述します。

以下のコードを、タブ機能を実装したいページのHTMLの<head></head>内に追加してください。

<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';
// タブメニュー実装
document.getElementById(tabname).style.display = 'block';
}
//</script>

<style type="text/css">
/* ▼ タブメニュー全体の設定 */
div.tabbox { margin: 15px 0 0 0; padding: 0px; width:600px; height:200px;}
/* ▼ タブ部分のマージンとパディング領域を設定 */
p.tabs { margin: 0px; padding: 0px; }
p.tabs a {
/* ▼ リンクをタブのように見せる */
display: block; width: 100px; float: left;
margin: 0px 3px 0px 0px; padding: 3px;
text-align: center;
font-size:12px;
}
/* ▼ タブごとの配色設定 */
p.tabs a.tab1 {text-decoration:none; background-color:#fafafa;border-right:1px solid #dcdcdc;border-left:1px solid #dcdcdc;border-top: 3px solid rgba(170, 0, 0, 0.85); color: #666; font-weight:600;}
p.tabs a.tab2 {text-decoration:none; background-color:#fafafa;border-right:1px solid #dcdcdc;border-left:1px solid #dcdcdc;border-top: 3px solid rgba(0, 170, 0, 0.85); color: #666; font-weight:600;}
p.tabs a.tab3 {text-decoration:none; background-color:#fafafa;border-right:1px solid #dcdcdc;border-left:1px solid #dcdcdc;border-top: 3px solid rgba(0, 0, 170, 0.85); color: #666; font-weight:600;}
p.tabs a:hover {opacity:0.7;filter:alpha(opacity=70);}
/* ▼ タブ中身のボックス */
div.tab {
/* ▼ ボックス共通の装飾 */
height: 270px; clear: left;
}
/* ▼ 各ボックスの配色設定 */
div#tab1 { border: 2px solid #DDD; background-color: #fbfbfb; }
div#tab2 { border: 2px solid #DDD; background-color: #fbfbfb; }
div#tab3 { border: 2px solid #DDD; background-color: #fbfbfb; }
div.tab p { margin: 0.5em; }
</style>

↑ タブメニューの設定文は、基本的にcssのルールです。

"height"と"width"でボックスの高さと横幅を設定し、 "border"や"background-color"で枠線や背景色の設定を行ってください。

② タブメニュー自体のHTML行の記述

手順①でタブメニューの実装の準備は整ったので、あとはタブメニュー自体のhtml行を記述するだけです。

タブメニューを実装したい部分に、以下のようなコードを記述してください。

<!-- タブメニュー実装 HTML文 -->

<div class="tabbox">

<p class="tabs">
<a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">タブ1</a>
<a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">タブ2</a>
<a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">タブ3</a>
</p>
<div id="tab1" class="tab">
タブ1の内容です。画像やリンクを含めることもできます。
</div>

<div id="tab2" class="tab">
タブ2の内容です。画像やリンクを含めることもできます。
  </div>

<div id="tab3" class="tab">
タブ3の内容です。画像やリンクを含めることもできます。
</div>

</div><!-- tabbox -->

<!-- ページを開いた際の最初に表示されるタブの選択 -->
<script type="text/javascript">
ChangeTab('tab1');
</script>

<!-- タブメニュー実装 HTML文 -->

解説:

  • タブを追加したい場合は、上記と同様の記述をtab4, tab5...と追加していくだけです。
  • 最後の方の ChangeTab('tab1'); の部分でページを開いた際に 最初に表示されるタブを選択します。※この行が無いとタブメニューがバラけてしまうので注意!)

③ 実装完了

以上でタブメニューを作成する手順は完了です。上の実装例で示したようなタブメニューが追加 できていると思います。

今回はいつもにも増して記述する行が多く、htmlに加え多少のcssの知識が必要なため、もし何か疑問点がおありでしたら"コメント欄"もしくはお問い合わせフォームの方にて、お気軽にご質問ください!

お問い合わせフォーム

-HP・ブログ関連
-, , , , ,

Copyright© ゲマステ!- Gamers Station , 2019 All Rights Reserved.