ナビゲーションコード生成用
一覧と詳細を並べる2ペイン
左の一覧から選ぶと、右に詳細が表示されるタブレット向けの構成。
用途・説明
左に一覧、右に選んだ項目の詳細を表示する、2ペインのナビゲーションを作成します。画面の広いiPadやパソコンでは左右に並べ、スマホでは一覧と詳細を別の画面として切り替えます。メッセージ、予約の一覧、顧客リスト、設定画面などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[一覧の内容]- 例：予約の一覧（お客様名・日時）
[詳細の内容]- 例：予約の詳細（メニュー・備考）
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「一覧と詳細を並べる2ペイン」を実装してください。 ## 表示内容 - 左のペイン：[一覧の内容] - 右のペイン：[詳細の内容] ## レイアウト - 768px 以上：左ペイン（幅 320px）と右ペイン（残りの幅）を横に並べる。あいだに 1px solid #E2E8F0 - それぞれのペインは、独立して縦にスクロールする。全体の高さは画面いっぱい（100dvh からヘッダーを引いた高さ） - 768px 未満：最初は一覧だけを表示し、項目を選ぶと詳細の画面に切り替わる。詳細の上部に「一覧に戻る」を置く ## デザイン - 一覧の項目：高さ 72px、左右padding 16px、下に 1px solid #E2E8F0。1行目 15px・font-weight 700、2行目 13px・色 #5F6D84 - 選択中の項目：背景は #1463F0 の9%の淡い色、左端に 3px の #1463F0 の線 - hover：背景 #F7F9FC - 右ペイン：padding 32px。何も選ばれていないときは、中央に「左の一覧から選んでください」と表示する ## 動作 - 選んだ項目をURL（?id=123）に反映し、再読み込みしても同じ項目が開く - スマホで詳細から戻ったとき、一覧のスクロール位置を保つ ## アクセシビリティ - 一覧は nav 要素（または role="list"）にし、選択中の項目に aria-current="true" を付ける - 右ペインは main 要素（または role="region" と aria-label）にする - 項目を選んだら、右ペインの見出しにフォーカスを移す - 上下の矢印キーで一覧を移動できる ## 出力形式 - [使用技術]のコードを1つ出力 - 一覧のデータを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。