モーダル・通知・タブコード生成用
下線つきのタブ
選択中のタブに下線が付く、いちばん基本のタブ。
用途・説明
選択中のタブの下に線が付く、基本のタブを作成します。商品の詳細（概要・仕様・レビュー）や、設定画面の切り替えなど、同じ場所で内容を切り替えたいときに使います。下線がなめらかに移動する動きを付けています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[タブのリスト]- タブ名と内容のセットを3〜5つ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「下線つきのタブ」を実装してください。 ## 表示内容 [タブのリスト] ## レイアウト - タブを横に並べる。間隔 32px、左揃え - タブの列の下に、全幅の細い線。選択中のタブの下にだけ、太い線を重ねる - パネルは、タブの下 24px に表示する - タブが画面に収まらないときは、横にスクロールできるようにする（スクロールバーは隠す） ## デザイン - タブ：15px、font-weight 700、色 #5F6D84、上下padding 12px - 選択中のタブ：色 #1463F0 - 全幅の線：1px solid #DCE4F0 - 選択中の下線：高さ 2px、色 #1463F0 - hover：色を #1B2A44 にする - パネル：15px、line-height 1.9、色 #47566E ## 動作 - タブを押すと、パネルを切り替える - 選択中の下線は、1本の要素を動かして表現する。タブを切り替えると、位置と幅が 0.25秒でなめらかに変わる - 選んだタブを URL のハッシュ（#spec など）に反映し、そのURLを開いたときは、そのタブが選ばれた状態にする ## アクセシビリティ - role="tablist" / "tab" / "tabpanel"、aria-selected、aria-controls、aria-labelledby を設定する - 左右の矢印キーでタブを移動、Home / End で最初・最後へ - 選択中のタブだけ tabindex="0"、ほかは "-1" - パネルに tabindex="0" を付け、タブからすぐにパネルへ移動できるようにする - 下線の動きは prefers-reduced-motion で無効化 - 色だけでなく、下線でも選択中だと分かるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。