ナビゲーションコード生成用
左に並べる縦型のタブ
左でタブを選び、右に内容を表示する2列の切り替え。
用途・説明
左側にタブを縦に並べ、右側に選んだタブの内容を表示する構成を作成します。タブの名前が長い場合や、項目が5つ以上ある場合に向いています。機能の紹介、設定画面、業種別の活用例、よくある質問のカテゴリ分けなどに使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[タブ名]- 例：予約管理、顧客管理、売上レポート、メール配信
[各タブの内容]- 見出し・説明文・画像など
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「左に並べる縦型のタブ」を実装してください。 ## 表示内容 - タブ：[タブ名] - 各タブの内容： [各タブの内容] ## レイアウト - PC：左にタブ（幅 240px）、右に内容。間隔 40px - タブは縦に並べ、間隔 4px ## デザイン - 各タブ：高さ 48px、左右padding 16px、角丸 8px、文字 15px・色 #47566E、左揃え - 選択中：背景は #1463F0 の9%の淡い色、文字 #1463F0・font-weight 700、左端に 3px の #1463F0 の線 - hover：背景 #F1F5FC - 内容の側：見出し 22px・font-weight 700、説明文 15px・line-height 1.9・色 #47566E ## 動作 - タブを押すと、右の内容が切り替わる - 一定時間ごとに自動で切り替える機能は付けない（読んでいる途中で変わらないようにする） ## レスポンシブ - 768px 未満：タブをやめてアコーディオンにする（タブ名を押すと、その下に内容が開く） - どちらの表示でも同じHTMLを使い、CSSとJavaScriptで切り替える方法を説明する ## アクセシビリティ - role="tablist" に aria-orientation="vertical" を付ける - 上下の矢印キーでタブを移動できる - aria-selected と aria-controls を正しく設定する - 色だけに頼らず、左端の線と太字でも選択中を示す - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - タブを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。