タブ切替型サービス紹介
このパーツは、複数のサービスをタブで切り替えて表示する UI です。 role="tablist" のボタン群（ sv-tb__b ）に data-i でインデックスを持たせ、クリックされたタブに対応するパネル（ sv-tb__p ）に is-show を付けて表示を入れ替える JavaScript と組み合わせて…
このパーツの使いどころと実装ポイント
このパーツは、複数のサービスをタブで切り替えて表示する UI です。role="tablist" のボタン群（sv-tb__b）に data-i でインデックスを持たせ、クリックされたタブに対応するパネル（sv-tb__p）に is-show を付けて表示を入れ替える JavaScript と組み合わせて動きます。選択中のタブは下線（border-bottom）で示し、限られた縦スペースに複数サービスの詳細を収められるのが特長です。
向いている場面
3〜5 種類のサービスや料金プラン、機能カテゴリーを1 つの領域でコンパクトに見せ分けたいときに向きます。制作会社のサービス一覧、SaaS の機能紹介、サロンのメニュー区分など、横並びのカードを延々と並べたくない場面で効果的です。各パネルは見出し・説明・ul の箇条書きで構成され、情報量を確保しています。
カスタマイズの勘所
- タブのボタンとパネルを 1 組ずつ追加・削除すれば項目数を変えられる
- タブが多すぎると窮屈になるので 5 個程度までが見やすい目安
- 初期表示するタブは
is-actとis-showの付け先で決まる
アクセシビリティ面では、ボタンに aria-selected、パネルに role="tabpanel" と aria-labelledby を付け、矢印キーでタブ移動できるようにするとより親切です。スマホではタブが折り返して 2 段になるため、ラベルを短くするか横スクロールに切り替える設計も検討します。JavaScript が無効でも内容が読めるよう、フォールバックとして全パネル表示を用意すると安心です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。