タブ

概要

一つのページ内でセクションを切り替えて異なる内容を表示するために使用します。
※タブのデザインについては、適時SCSS（module.scss）を改変してください。

デザイン

横幅

タブ全体の横幅は、枠（親要素）に対して100%、個々の幅は最低（min-width：$btn-size-base）で設定。文字列がそれ以上になる場合は、文字幅に合わせて文字の左右に（$hf-space）づつ余白を設けて、成り行きサイズで設定します。

メインコンテンツ

メインコンテンツの切り替えに使用します。

第二コンテンツが表示されます。

<div class="tabTypeA" role="tablist">
<ul>
<li><button type="button"
role="tab"
id="tab-group1"
aria-selected="false"
aria-controls="panel-group1"
data-group="group1"
tabindex="-1"
><span>第一ページ</span></button></li>
<li class="is-active"><button type="button"
role="tab"
id="tab-group2"
aria-selected="true"
aria-controls="panel-group2"
data-group="group2"
tabindex="0"
><span>第二ページ</span></button></li>
<li><button type="button"
role="tab"
id="tab-group3"
aria-selected="false"
aria-controls="panel-group3"
data-group="group3"
tabindex="-1"
><span>第三ページ</span></button></li>
<li><button type="button"
role="tab"
id="tab-group4"
aria-selected="false"
aria-controls="panel-group4"
data-group="group4"
tabindex="-1"
><span>第四ページ</span></button></li>
<li><button type="button"
role="tab"
id="tab-group5"
aria-selected="false"
aria-controls="panel-group5"
data-group="group5"
tabindex="-1"
><span>第五ページ</span></button></li>
</ul>
</div>
<div class="tabGraoupWrap">
<div class="tabGraoup group1"
role="tabpanel"
id="panel-group1"
aria-labelledby="tab-group1"
hidden
>---第一コンテンツHTML記述---</div>
<div class="tabGraoup group2 is-active"
role="tabpanel"
id="panel-group2"
aria-labelledby="tab-group2"
>---第二コンテンツHTML記述（表示）---</div>
<div class="tabGraoup group3"
role="tabpanel"
id="panel-group3"
aria-labelledby="tab-group3"
hidden
>---第三コンテンツHTML記述---</div>
<div class="tabGraoup group4"
role="tabpanel"
id="panel-group4"
aria-labelledby="tab-group4"
hidden
>---第四コンテンツHTML記述---</div>
<div class="tabGraoup group5"
role="tabpanel"
id="panel-group5"
aria-labelledby="tab-group5"
hidden
>---第五コンテンツHTML記述---</div>
</div>

サブコンテンツ

メイン以外のコンテンツ（左右ペイン）にある場合に使用します。

第一コンテンツが表示されます。

<div class="tabTypeB" role="tablist">
<ul>
<li class="is-active"><button type="button"
role="tab"
id="tab-group1"
aria-selected="true"
aria-controls="panel-group1"
data-group="group1"
tabindex="0"
><span>第一ページ</span></button></li>
<li><button type="button"
role="tab"
id="tab-group2"
aria-selected="false"
aria-controls="panel-group2"
data-group="group2"
tabindex="-1"
><span>第二ページ</span></button></li>
</ul>
</div>
<div class="tabGraoupWrap">
<div class="tabGraoup group1 is-active"
role="tabpanel"
id="panel-group1"
aria-labelledby="tab-group1"
>---第一コンテンツHTML記述（表示）---</div>
<div class="tabGraoup group2"
role="tabpanel"
id="panel-group2"
aria-labelledby="tab-group2"
hidden
>---第二コンテンツHTML記述---</div>
</div>

data-groupの値とtabGraoupと並列のCLASS名を紐づけます。

独立カラム

掲載内容が小さく一画面で収まり、切り替え表示などに使いたい場合に使用します。

第一コンテンツが表示されます。

<div class="tabTypeC role="tablist">
<ul>
<li class="is-active"><button type="button"
role="tab"
id="tab-group1"
aria-selected="true"
aria-controls="panel-group1"
data-group="group1"
tabindex="0"
><span>第一ページ</span></button></li>
<li><button type="button"
role="tab"
id="tab-group2"
aria-selected="false"
aria-controls="panel-group2"
data-group="group2"
tabindex="-1"
><span>第二ページ</span></button></li>
<li><button type="button"
role="tab"
id="tab-group3"
aria-selected="false"
aria-controls="panel-group3"
data-group="group3"
tabindex="-1"
><span>第三ページ</span></button></li>
</ul>
</div>
<div class="tabGraoupWrap">
<div class="tabGraoup group1 is-active"
role="tabpanel"
id="panel-group1"
aria-labelledby="tab-group1"
>---第一コンテンツHTML記述---（表示）</div>
<div class="tabGraoup group2"
role="tabpanel"
id="panel-group2"
aria-labelledby="tab-group2"
hidden
>---第二コンテンツHTML記述---</div>
<div class="tabGraoup group3"
role="tabpanel"
id="panel-group3"
aria-labelledby="tab-group3"
hidden
>---第三コンテンツHTML記述---</div>
</div>

タブ（tabTypeX）の隣にコンテンツ（tabGraoupWrap）を配置します。

スイッチタイプ

メインコンテンツの切り替えに使用します。（※切り替えコンテンツ３つ以内が目安です。）

第一コンテンツが表示されます。

<div class="switchNavi" role="tablist">
<ul>
<li class="is-active><button type="button"
role="tab"
id="tab-group1"
aria-selected="true"
aria-controls="panel-group1"
data-group="group1"
tabindex="0"
><span>第一ページ</span></button></li>
<li><button type="button"
role="tab"
id="tab-group2"
aria-selected="false"
aria-controls="panel-group2"
data-group="group2"
tabindex="-1"
><span>第二ページ</span></button></li>
<li><button type="button"
role="tab"
id="tab-group3"
aria-selected="false"
aria-controls="panel-group3"
data-group="group3"
tabindex="-1"
><span>第三ページ</span></button></li>
</ul>
</div>
<div class="tabGraoupWrap">
<div class="tabGraoup group1 is-active"
<div class="tabGraoup group2"
role="tabpanel"
id="panel-group1"
aria-labelledby="tab-group1"
>---第一コンテンツHTML記述（表示）---</div>
<div class="tabGraoup group2"
<div class="tabGraoup group2"
role="tabpanel"
id="panel-group2"
aria-labelledby="tab-group2"
hidden
>---第二コンテンツHTML記述---</div>
<div class="tabGraoup group3"
<div class="tabGraoup group2"
role="tabpanel"
id="panel-group3"
aria-labelledby="tab-group3"
hidden
>---第三コンテンツHTML記述---</div>
</div>

改変対象ファイル

CSS:: _ul.scss 内に改変対象箇所があります。
_ul.scssは、本番へは反映せずに、必要なUIのコードを_modules.scssに追加してください。

Javascript:: タブの動作:tabChangeSet()　スイッチの動作:switchNavi()
必要なUIのコードをライブラリー (/temp/js/tips.js) から本番 (/common/js/tips.js) に追加してください。