モーダル・通知・タブコード生成用
縦に並ぶタブ
左にメニュー、右に内容。設定画面の定番。
用途・説明
左に縦のタブ、右に内容を表示するレイアウトを作成します。項目が多くても見渡しやすいため、設定画面やマイページ、ヘルプなどに向いています。スマホでは、上部の横スクロールのタブに切り替えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[タブのリスト]- タブ名と内容のセットを4〜6つ。例：プロフィール、通知、お支払い
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「縦に並ぶタブ」を実装してください。 ## 表示内容 [タブのリスト] ## レイアウト - PC：左に縦のタブ（幅 220px）、右に内容のパネル。間隔 40px - タブの列の右に、縦の細い線。選択中のタブの右にだけ、太い線を重ねる - タブの列は position: sticky にして、内容が長くても見える位置に残す - スマホ（767px以下）：タブを上に移し、横スクロールの下線タブにする ## デザイン - タブ：高さ 44px、左padding 4px、文字 15px・font-weight 700・色 #5F6D84、左揃え - 選択中のタブ：色 #1463F0 - 縦の線：1px solid #DCE4F0 - 選択中の線：幅 2px、色 #1463F0 - hover：色を #1B2A44 にする - タブの左に、アイコン（20px）を付けられるようにする - パネルの見出し：22px、font-weight 700、色 #1B2A44 - パネルの本文：15px、line-height 1.9、色 #47566E ## 動作 - タブを押すと、パネルを切り替える - 選んだタブを URL に反映し、再読み込みしても保たれるようにする - 入力途中の内容があるタブから移動するときに、確認を出せるようにする（コールバックで判定） ## アクセシビリティ - role="tablist"（aria-orientation="vertical"）/ "tab" / "tabpanel" を設定する - 上下の矢印キーでタブを移動、Home / End で最初・最後へ。スマホの横並びのときは、左右の矢印キーにする - 選択中のタブだけ tabindex="0"、ほかは "-1" - 各タブが別のページの場合は、タブではなくナビゲーション（nav 要素とリンク、aria-current="page"）として実装するほうがよいことを、コメントで補足する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。