背景コード生成用
左右で色を分ける2色背景
画面を左右2色に分けて、2つの内容を対比させる。
用途・説明
セクションを左右2色に分ける背景を作成します。「個人の方／法人の方」「Before／After」「サービスA／サービスB」のように、2つの内容を並べて見せたいときに向いています。中のコンテンツ幅とは関係なく、色は画面の端まで広がります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[右側の色]- 例：#FFFFFF
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「左右で色を分ける2色背景」を持つセクションを実装してください。 ## 仕様 - 左側の色：#1463F0、右側の色：[右側の色] - 色の境目は画面の中央 - セクションの最小の高さ：480px ## 実装方法 - セクションの背景に linear-gradient(90deg, 左の色 50%, 右の色 50%) を指定し、色を画面の端まで広げる - 中のコンテンツは最大幅 1120px の2カラム（grid）にし、左右それぞれの色の上に置く - HTMLに背景用の要素を足さない ## 読みやすさ - 左側（濃い色）の文字は白、右側は #1B2A44 にする - それぞれの文字と背景のコントラスト比を 4.5:1 以上にする - 左右にそれぞれ、見出し・説明・ボタンを置いたサンプルを用意する ## レスポンシブ・その他 - スマホ（768px未満）では上下2色に切り替える（linear-gradient の向きを 180deg に）。上下の高さは内容に合わせる - 左右の内容の高さが違っても、色の境目は中央のままにする - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 2色と境目の位置をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。