テーブル・一覧コード生成用
グリッドとリストの表示切り替え
同じ一覧を、写真重視と情報重視で切り替える。
用途・説明
同じ一覧を、写真が大きいグリッド表示と、情報が多いリスト表示で切り替えられるパーツを作成します。見た目で選びたい人と、条件を比べたい人の両方に対応できます。商品、物件、求人などの一覧に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目のリスト]- タイトル・画像・価格・補足の情報を6件程度
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「グリッドとリストの表示切り替え」を実装してください。 ## 表示内容 - 件数と、表示の切り替えボタン（グリッド／リスト） - 項目： [項目のリスト] ## レイアウト - 上の段：左に件数、右に切り替えボタン - グリッド表示：PC 3列、スマホ 2列。カードは上に画像（4:3）、下にタイトルと価格 - リスト表示：1列。各行は左に画像（幅 120px）、中央にタイトルと補足の情報、右端に価格 - 項目の HTML は1つだけ書き、表示の切り替えは CSS（親要素の data 属性）で行う ## デザイン - 切り替えボタン：2つのアイコンのボタンを、1つの枠（枠線 1px solid #DCE4F0、角丸 8px、padding 2px）に並べる - 各ボタン：36×32px、角丸 6px、アイコンの色 #8A96AA - 選択中のボタン：背景 #1463F0、アイコン #FFFFFF - カード・行：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px - タイトル：15px、font-weight 700、色 #1B2A44 - 補足の情報：13px、色 #5F6D84（リスト表示のときだけ表示する） - 価格：16px、font-weight 700、色 #1B2A44 ## 動作 - 切り替えは、すぐに反映する。選んだ表示を保存し、次に開いたときも同じ表示にする - スマホの初期表示はリスト、PC の初期表示はグリッドにする（保存した値があれば、そちらを優先する） - 切り替えても、スクロールの位置が大きくずれないようにする ## アクセシビリティ - 切り替えボタンは、ラジオボタン（role="radiogroup"、aria-label="表示の切り替え"）として実装する。各ボタンに aria-label="グリッド表示" / "リスト表示" - 項目のリストは ul / li。読み上げの内容は、どちらの表示でも同じにする - 表示が変わったことを aria-live="polite" で伝える - アイコンは aria-hidden="true" ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。