背景コード生成用
斜めに切り替わる2色の背景
セクションの境目を斜めにして、流れに勢いを。
用途・説明
上下のセクションの境目を、水平ではなく斜めの線で切り替える背景を作成します。ファーストビューの下端や、特徴紹介から料金表へ移る場面など、ページにリズムをつけたいところに向いています。clip-path を使うため画像が不要で、角度もCSSで変えられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[上の色]- 例：#FFFFFF
[斜めの高低差]- 左端と右端の高さの差。例：PC 80px / スマホ 32px
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 2つのセクションの境目が「斜めに切り替わる背景」を実装してください。 ## 仕様 - 上のセクションの背景色：[上の色] - 下のセクションの背景色：#1463F0 - 斜めの高低差：[斜めの高低差]（右上がり） ## 実装方法 - 下のセクションに clip-path: polygon() を指定し、上端を斜めに切り取る - 高低差はCSS変数（例：--slant）で持ち、polygon の座標に calc() で使う - 斜めに切り取った分だけ、下のセクションに上方向のマイナスマージンと上paddingを足して、上のセクションとの間に隙間や重なりが出ないようにする - 画像やSVGファイルは使わない ## レイアウト - 斜めの部分に文字やボタンがかからないよう、両セクションの内側の余白を十分に取る - 下のセクションの文字色は、背景色に合わせて白または濃い色を選ぶ ## レスポンシブ - スマホでは高低差を小さくする（斜めが急になりすぎないように） - 画面幅が変わっても角度が極端に変わらないことを確認する ## アクセシビリティ - 文字と背景のコントラスト比4.5:1以上 - 見た目の順序とHTMLの順序を一致させる ## 出力形式 - [使用技術]のコードを1つ出力（上のセクションと下のセクションを含む最小の例） - 色と高低差をCSS変数にまとめ、逆向き（右下がり）にする方法をコメントで説明する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。