タブをクリックすることで、ウェブサイト上のとある領域の表示を切り替えるためのスクリプトを作りました。
このスクリプトの名称は「タブスイッチスクリプト」とします。
タブでスイッチ(切り替え)するため、そのような名称にしました。
とは言っても実際に使用する際には、タブではなくボタンにすることも可能です。
「タブ」であるか、それとも「ボタン」であるかは、CSSでのデザイン次第です。
便宜上、以下からの解説は「タブ」と表記して進めていきます。
特にスマホの場合は画面上に表示できるページ領域が狭いため、PCでは表示されているものをスマホでは非表示にする場合があります。
そのような際の選択肢の1つとして「タブ式の切り替えにする」というやり方が考えられます。
このスクリプトを使用すれば、各エリアを簡単にタブ切り替え式にすることができます。
また、既存のページに組み込むことを前提として作られていますので、設置作業やカスタマイズがしやすいようにできています。
現在の最新バージョンは2018年10月9日公開の1.0です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。
タブスイッチスクリプトのサンプル
初期状態ではページ表示時に「タブ1」が選択された状態になっています。
これを他のタブに変更して使用することも可能です。
タブスイッチスクリプトをボタン化したサンプル
「タブ」のデザインはCSSで設定されていますので、CSSを変更することでこのようなボタンのデザインにすることも可能です。
タブスイッチスクリプトのダウンロード
無料でダウンロードできます。
まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。
1、タブスイッチスクリプトをダウンロードし、展開する。
2、フォルダごとサーバにアップロードする。
3、ブラウザでindex.htmlにアクセスし、動作を確認する。
以下の作業は同梱のindex.htmlのソースからコピーしていくと間違いがないでしょう。
4、組み込みたいページにリスト形式(ul li)でタブを用意する。
これは必ずul要素である必要があります。このプログラムの仕様です。
そのul要素にはtab-menuというid名を付けてください。
<ul id="tab-menu">
<li class="tab-1 active">タブ1</li>
<li class="tab-2">タブ2</li>
<li class="tab-3">タブ3</li>
<li class="tab-4">タブ4</li>
</ul>
上記のタブの数(li要素)は増やしたり減らしたり自由にできます。(上記コードは4つに減らしています)
また、それぞれのタブ項目(li要素)は上記のようにtab-1から数字を順番にしたクラス名を付けてください。
5、表示するエリアのコードをページ内に追加してください。
以下のコード(初期状態)のように、tab-1から数字を順番にしたクラス名のdiv要素を設置します。
これは必ずdiv要素である必要があります。このプログラムの仕様です。
<div class="tab-1">
ここに表示したい内容。
</div>
<div class="tab-2">
ここに表示したい内容。
</div>
上記コードのdivの中にはどのようなHTML要素を記入しても問題ありません。
その部分はこのプログラムの動作に影響しません。
画像を設置してもOKですし、ulやdlのようなリスト要素を設置してもOKですし、その気になれば当サイトで配布しているレスポンシブ・メールフォームのようなプログラムを組み込むことも可能です。
6、tab-switch.cssを読み込ませる。
このtab-switch.cssの設置場所はどこでも構いません。
サーバ上にすでにcssという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。
<link rel="stylesheet" href="css/tab-switch.css" />
7、jQuery本体とtab-switch.jsを読み込ませる。
このtab-switch.jsの設置場所もどこでも構いません。
サーバ上にすでにjsという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/tab-switch.js"></script>
8、上記手順4で設置したli要素の中で、ページ表示時にアクティブ(表示状態)にしておきたいタブに対してactiveというクラス名を追加する。
(初期状態ではタブ1がアクティブ(表示状態)になっています)
<li class="tab-1 active">タブ1</li>
9、上記手順5で設置した各div要素の内、上記手順8で設定したアクティブなタブに応じたものをtab-switch.cssで表示させておく。
(初期状態ではタブ1をアクティブにしているため、div.tab-1だけを以下のようにコメントアウトして表示状態にしてあります)
/*div.tab-1,*/
div.tab-2,
div.tab-3,
div.tab-4,
div.tab-5,
div.tab-6,
div.tab-7,
div.tab-8 {
display : none;
}
組み込み作業は以上です。
デザインを変更したりする前に、この時点で動作確認をしてみましょう。
また、body要素に対する指定は既存サイトに組み込む場合は不要になると思いますので、削除してしまってもOKとなります。
タブのデザインを変更したい場合は、上記手順の4で設置したul id=”tab-menu”に対してCSSで自由に変更してください。
この「タブスイッチスクリプト」は、CSSをどのように編集したとしても動作エラーの原因にはなりませんので、自由にCSSでデザインしてください。
ボタン風のデザインにしたり、画像を設置することも可能です。
プログラムファイル(JS)では、クリックされたli要素のクラス名に応じたdiv要素に対して表示・非表示の切り替えをするだけの仕組みになっています。
表示上の見た目はすべてCSSで設定されています。
初期状態ではimageという名前のフォルダがあり、その中に数枚の画像が格納されています。
これは既存サイトに組み込む際には不要ですので、フォルダごと削除しても問題ありません。
本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。
無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。
初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。
しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。
ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。
ページを下に少しスクロールされると「ページ最上部に戻る」が出現し、そのボタンをクリックするとページ最上部にアニメーションで戻るスクリプトを作りました。サイトを制作する度に毎回同じコードを書いたりコピペするのも面倒なため、簡単に組み込めるようにできています。
ドロップダウン式(縦方向の折り畳み式)のスマホ用メニューを簡単に設置できるスクリプトを無料ダウンロードできます。CSSが理解できる人なら自由にデザインを変更したり、多重階層にすることも可能でしょう。
マウスオーバーさせた時に画像を切り替えるのはCSSの:hover疑似要素を使用するのが基本となりますが、フェード演出で切り替えたい場合もありますね。そのようなフェード演出を簡単に実装できるスクリプトを作りました。無料でダウンロードでき、既存サイトに簡単に実装できます。
画像リンクをクリックするとズーム演出で大きな画像をオーバーレイで表示するスクリプトを作りました。iPhoneやiPadなどでアプリを開いた時のような演出とお考えください。無料でダウンロードでき、既存サイトに組み込みやすいようにできています。
ページ内リンクはスクロールのアニメーションなどもなく一瞬で移動するため、ページ内のどの部分に移動したのかがわかりにくいのが欠点です。ページ内リンクにスクロールのアニメーションを簡単に付加できるスクリプトを作りました。既存ページに組み込むのも超簡単です。
この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。
