ナビゲーションコード生成用
丸いピル型のタブ
選択中だけ色が付く、やわらかい印象の切り替えタブ。
用途・説明
選択中の項目だけが丸い背景で塗られる、ピル型のタブを作成します。下線のタブよりもやわらかく、ボタンに近い見た目です。メニューのカテゴリ切り替え、料金プランの対象の切り替え、実績の絞り込みなど、3〜5個の切り替えに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[タブ名]- 3〜5個。例：すべて、フード、ドリンク、デザート
[各タブの内容]- タブごとに表示する内容
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「丸いピル型のタブ」を実装してください。 ## 表示内容 - タブ：[タブ名] - 各タブの内容： [各タブの内容] ## デザイン - タブの並び：中央揃え、間隔 8px - 各タブ：高さ 40px、左右padding 20px、角丸 999px、文字 14px - 選択中：背景 #1463F0、文字 #FFFFFF、font-weight 700 - 選択していないタブ：背景 #F1F5FC、文字 #47566E。hover で背景 #E3EAF6 - タブとその下の内容の間隔 24px ## 動作 - タブを押すと、下の内容が切り替わる。切り替えは 0.15秒のフェード - 選択中のタブをURLのハッシュに反映し、そのURLを開いたときに同じタブが選ばれる ## レスポンシブ - スマホで入りきらない場合は、左揃えの横スクロールにする（折り返さない） - 選択したタブが見える位置に来るよう、自動で横スクロールさせる ## アクセシビリティ - role="tablist"、role="tab"、role="tabpanel" を使い、aria-selected と aria-controls を正しく設定する - 左右の矢印キーでタブを移動できる。Home / End で最初・最後へ移動する - 選択中のタブだけ tabindex="0"、ほかは -1 にする - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - タブを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。