タブ／Tab

コンテンツを整理し、ユーザーが異なるセクションを切り替えられるコンポーネントです。
タブの選択に応じて対応するコンテンツが表示され、限られたスペースでも情報を効率的に管理できます。
タブパネルは本コンポーネントでは含まれません。

<div class="c-tab" data-js-tab>
  <div class="c-tab__head" role="tablist">
    <div class="c-tab__tabs">
      <button id="tab-1" class="c-tab__trigger is-active" type="button" data-js-tab-trigger="tab_content01" role="tab" aria-selected="true">タブラベル1</button>
      <button id="tab-2" class="c-tab__trigger" type="button" data-js-tab-trigger="tab_content02" role="tab" aria-selected="false">タブラベル2</button>
    </div>
  </div>
  <div class="c-tab__contentArea">
    <div class="c-tab__content is-active" data-js-tab-content="tab_content01" role="tabpanel" aria-labelledby="tab-1">タブコンテンツ1:コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
    <div class="c-tab__content" data-js-tab-content="tab_content02" role="tabpanel" aria-labelledby="tab-2">タブコンテンツ2:コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  </div>
</div>

原則

タブは横並びで表示します。テキストは端的でシンプルにすることを想定します。
タブの数が多く画面幅に収まらない場合、横スクロールで操作できます。
- デスクトップでは Shift + マウスホイールやタッチパッドのスクロールで移動可能。
- スマートフォンやタブレットでは、スワイプでスムーズに切り替えられます。