モーダル・通知・タブコード生成用
横スクロールできるタブ（スマホ）
カテゴリが多くても、指で横に流して選べる。
用途・説明
スマホで、たくさんのカテゴリを横にスクロールして選べるチップ型のタブを作成します。右端をぼかして、続きがあることを伝えます。選んだタブは、自動で見える位置に移動します。ECサイトやメディアのカテゴリ切り替えに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[カテゴリのリスト]- 例：すべて、新着、人気、セール、特集、ギフト
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「横スクロールできるタブ」を実装してください。 ## 表示内容 - タブ：[カテゴリのリスト] - 選んだカテゴリの内容を表示する、サンプルのエリア ## レイアウト - タブを横1列に並べ、折り返さない。間隔 8px - 画面の幅を超えるぶんは、横にスクロールする。スクロールバーは隠す - 左端と右端に、画面の端までの余白（16px）を付ける。スクロールすると、タブは画面の端まで流れる - 続きがある側の端を、背景色に向かってぼかす（スクロールの位置に応じて、左・右を切り替える） ## デザイン - タブ：高さ 36px、左右padding 16px、角丸 999px、枠線 1px solid #DCE4F0、背景 #FFFFFF、文字 14px・font-weight 700・色 #5F6D84、折り返さない - 選択中のタブ：背景 #1463F0、枠線 #1463F0、文字 #FFFFFF - ぼかしの幅：40px ## 動作 - タブを押すと、内容を切り替える - 選んだタブが端で切れているときは、見える位置（できれば中央）までなめらかにスクロールする - CSS の scroll-snap で、スクロールが止まる位置をタブの頭にそろえる - PC では、左右の端に矢印のボタンを表示し、押すと1画面ぶんスクロールする - タブの列を、スクロールしても画面の上に残せるようにする（position: sticky） ## アクセシビリティ - role="tablist" / "tab" / "tabpanel"、aria-selected を設定する - 左右の矢印キーでタブを移動できる。移動したタブは、見える位置にスクロールする - 矢印のボタンは、キーボードの操作では不要なので、tabindex="-1" と aria-hidden="true" にする - タップ領域は高さ 44px 以上（見た目が 36px の場合は、余白で補う） - スクロールの動きは prefers-reduced-motion のとき、なめらかにせず、すぐに移動する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。