モーダル・通知・タブコード生成用
スマホでアコーディオンに変わるタブ
PCではタブ、スマホでは開閉する一覧に。
用途・説明
PCでは横並びのタブ、スマホでは縦に並ぶアコーディオンに切り替わるパーツを作成します。同じ内容を、画面の広さに合った形で見せられます。商品の詳細（特徴・仕様・送料）や、サービスの説明に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目のリスト]- 見出しと内容のセットを3〜4つ。例：特徴、仕様、送料
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スマホでアコーディオンに変わるタブ」を実装してください。 ## 表示内容 [項目のリスト] ## レイアウト - PC（768px以上）：上に下線つきのタブを横並び、その下にパネルを1つだけ表示する - スマホ（767px以下）：見出しを縦に並べ、押すとその下に内容が開くアコーディオンにする - 内容の HTML は1つだけ書く（PC 用とスマホ用で、同じ内容を2回書かない） ## デザイン ### PC（タブ） - タブ：15px、font-weight 700、色 #5F6D84、上下padding 12px、間隔 32px - 選択中：色 #1463F0、下に 2px の線（#1463F0） - タブの列の下に 1px solid #DCE4F0 ### スマホ（アコーディオン） - 全体：枠線 1px solid #E2E8F0、角丸 10px - 見出し：高さ 52px、左右padding 16px、文字 15px・font-weight 700・色 #1B2A44。右端に「＋」（開いているときは「−」） - 開いている見出し：色 #1463F0 - 項目のあいだに 1px solid #E2E8F0 - 内容：padding 0 16px 16px ### 共通 - 内容：15px、line-height 1.9、色 #47566E ## 動作 - PC：タブを押すと、パネルを切り替える。最初は1つ目を選んだ状態 - スマホ：見出しを押すと開閉する。最初は1つ目だけ開いた状態。複数を同時に開ける - 画面の幅が変わって切り替わったとき、選んでいた（開いていた）項目を引き継ぐ - アコーディオンの開閉は 0.25秒 ## アクセシビリティ - PC では role="tablist" / "tab" / "tabpanel"、スマホでは button（aria-expanded、aria-controls）として、画面の幅に応じて属性を切り替える - PC では左右の矢印キーでタブを移動できる - 「＋」「−」は aria-hidden="true" - 開閉の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。