背景コード生成用
大きなカーブのセクション区切り
ゆるやかな弧で、やわらかくセクションをつなぐ。
用途・説明
セクションの境目を、画面幅いっぱいの大きな弧でつなぐ区切りを作成します。波形よりも落ち着いていて、クリニック、サロン、保育、コーポレートサイトなど、やわらかく上品な印象にしたいページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[上のセクションの背景色]- 例：#FFFFFF
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「大きなカーブのセクション区切り」を持つセクションを実装してください。 ## 仕様 - 上のセクションの背景色：[上のセクションの背景色] - 下のセクションの背景色：#1463F0 - カーブの深さ：80px（中央がいちばん高い、山なりの弧） ## 実装方法 - 下のセクションの上端を、clip-path: ellipse() または border-radius（50% / 100%）で弧の形にする。画像は使わない - 弧は画面幅より少し広く取り、両端が不自然に切れないようにする - 境目に 1px のすき間が出ないよう、上のセクションと重ねる - 逆向き（中央がへこむ弧）のバリエーションも併記する ## 読みやすさ - 下のセクションの文字色は、背景色に対してコントラスト比 4.5:1 以上になる色にする - 弧の部分に文字が重ならないよう、下のセクションの上の余白をカーブの深さぶん増やす ## レスポンシブ・その他 - スマホではカーブの深さを 40px にする - 横スクロールが出ないよう、はみ出した部分は overflow: hidden で隠す - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 色・カーブの深さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。