ナビゲーションコード生成用
切り替えタブ
下線で選択中を示す、キーボードでも操作できるタブ。
用途・説明
同じ場所で表示内容を切り替えるタブUIを作成します。選択中のタブを下線で示すシンプルなデザインで、矢印キーでの移動やスクリーンリーダー向けの属性まで含めて実装されます。商品の詳細情報や設定画面、料金プランの切り替えなどに使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[タブ項目]- 例：概要、機能、料金、レビュー
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「切り替えタブ」を実装してください。 ## 表示内容 - タブ：[タブ項目] - 各タブに対応するパネル（中身は仮のテキストでよい） ## デザイン - タブは横並び、左揃え。タブ同士の間隔 28px - タブ一覧の下端に 1px solid #E2E8F0 の線 - 通常：文字 15px、色 #5F6D84 - 選択中：文字色 #1463F0、font-weight 700、下端に 2px の線（#1463F0）。タブ一覧の線に重ねる - hover：文字色 #1B2A44 - 選択が変わっても太字化でタブの幅が変わらないようにする - 各タブの高さは 44px 以上 ## スマホ - タブが画面幅に収まらない場合は横スクロールにする（折り返さない） - スクロールバーは隠し、右端にフェードをかけて続きがあることを示す - 選択したタブが画面内に入るよう自動でスクロールする ## 動作 - クリックで対応するパネルを表示し、他は非表示にする - 左右の矢印キーで隣のタブへ移動、Home / End で最初・最後のタブへ - Tabキーではタブ一覧の中を1つずつ移動せず、選択中のタブ → パネル の順に進む ## アクセシビリティ - タブ一覧に role="tablist"、各タブは button 要素に role="tab" - 選択中のタブに aria-selected="true" と tabindex="0"、それ以外は tabindex="-1" - パネルに role="tabpanel" と aria-labelledby、タブ側に aria-controls - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - JavaScriptは必要最小限にし、タブを追加するときの手順をコメントで説明 - ページ遷移を伴う場合はタブではなくナビゲーション（a 要素 + aria-current）にすべき、という使い分けを最後に1〜2文で補足
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。