タブ
概要
一つのページ内でセクションを切り替えて異なる内容を表示するために使用します。
※タブのデザインについては、適時SCSS（module.scss）を改変してください。
デザイン
横幅
タブ全体の横幅は、枠（親要素）に対して100%、個々の幅は最低（min-width：$btn-size-base）で設定。文字列がそれ以上になる場合は、文字幅に合わせて文字の左右に（$hf-space）づつ余白を設けて、成り行きサイズで設定します。
メインコンテンツ
メインコンテンツの切り替えに使用します。
第一コンテンツが表示されます。
第二コンテンツが表示されます。
第三コンテンツが表示されます。
第四コンテンツが表示されます。
第五コンテンツが表示されます。
<nav class="tabTypeA">
<ul>
<li><button type="button" data-group="group1"><span>第一ページ</span></button></li>
<li class="active"><button type="button" data-group="group2"><span>第二ページ</span></button></li>
<li><button type="button" data-group="group3"><span>第三ページ</span></button></li>
<li><button type="button" data-group="group4"><span>第四ページ</span></button></li>
<li><button type="button" data-group="group5"><span>第五ページ</span></button></li>
</ul>
</nav>
<div class="tabGraoupWrap">
<div class="tabGraoup group1">---第一コンテンツHTML記述---</div>
<div class="tabGraoup group2 active">---第二コンテンツHTML記述---</div>
<div class="tabGraoup group3">---第三コンテンツHTML記述---</div>
<div class="tabGraoup group4">---第四コンテンツHTML記述---</div>
<div class="tabGraoup group5">---第五コンテンツHTML記述---</div>
</div>
サブコンテンツ
メイン以外のコンテンツ（左右ペイン）にある場合に使用します。
第一コンテンツが表示されます。
第二コンテンツが表示されます。
<nav class="tabTypeB">
<ul>
<li class="active"><button type="button" data-group="group1"><span>第一ページ</span></button></li>
<li><button type="button" data-group="group2"><span>第二ページ</span></button></li>
</ul>
</nav>
<div class="tabGraoupWrap">
<div class="tabGraoup group1 active">---第一コンテンツHTML記述---</div>
<div class="tabGraoup group2">---第二コンテンツHTML記述---</div>
</div>
data-groupの値とtabGraoupと並列のCLASS名を紐づけます。
独立カラム
掲載内容が小さく一画面で収まり、切り替え表示などに使いたい場合に使用します。
第一コンテンツが表示されます。
第二コンテンツが表示されます。
第三コンテンツが表示されます。
<nav class="tabTypeC">
<ul>
<li class="active"><button type="button" data-group="group1"><span>第一ページ</span></button></li>
<li><button type="button" data-group="group2"><span>第二ページ</span></button></li>
<li><button type="button" data-group="group3"><span>第三ページ</span></button></li>
</ul>
</nav>
<div class="tabGraoupWrap">
<div class="tabGraoup group1 active">---第一コンテンツHTML記述---</div>
<div class="tabGraoup group2">---第二コンテンツHTML記述---</div>
<div class="tabGraoup group3">---第三コンテンツHTML記述---</div>
</div>
タブ（tabTypeX）の隣にコンテンツ（tabGraoupWrap）を配置します。
スイッチタイプ
メインコンテンツの切り替えに使用します。（※切り替えコンテンツ３つ以内が目安です。）
第一コンテンツが表示されます。
第二コンテンツが表示されます。
第三コンテンツが表示されます。
<nav class="switchNavi mHfBottom">
<ul>
<li class="active><button type="button" data-group="group1""><span>第一ページ</span></button></li>
<li><button type="button" data-group="group2"><span>第二ページ</span></button></li>
<li><button type="button" data-group="group3"><span>第三ページ</span></button></li>
</ul>
</nav>
<div class="tabGraoupWrap">
<div class="tabGraoup group1 active">---第一コンテンツHTML記述---</div>
<div class="tabGraoup group2">---第二コンテンツHTML記述---</div>
<div class="tabGraoup group3">---第三コンテンツHTML記述---</div>
</div>
改変対象ファイル
- CSS:
- modules.scss 内に改変対象箇所があります。
- Javascript:
- tips.js / tabChangeSet()関数