背景コード生成用
アーチ型のセクション区切り
上が丸いアーチの形で、次のセクションをやさしく始める。
用途・説明
次のセクションの上端を、大きなアーチ（上に丸くふくらんだ形）にする区切りを作成します。サロン、クリニック、保育園、ベーカリーなど、角のないやさしい印象にしたいサイトに向いています。波よりも落ち着いた形なので、ページのなかで何度使ってもうるさくなりません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[上のセクションの背景色]- 例：#FFFFFF
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「アーチ型のセクション区切り」を持つ、上下2つのセクションを実装してください。 ## 仕様 - 上のセクションの背景色：[上のセクションの背景色] - 下のセクションの背景色：#1463F0 - 下のセクションの上端が、上に向かって丸くふくらむ。アーチの高さ：80px ## 実装方法 - 下のセクションの上に疑似要素（::before）を置き、border-radius: 50% 50% 0 0 / 100% 100% 0 0 でアーチにする - 疑似要素の横幅は 100% より少し広く（120%）とり、左右中央に置いて端のカーブをゆるやかにする - 上のセクションとの間に 1px のすき間が出ないよう、1px 重ねる - 画像・SVGは使わない ## 読みやすさ - 下のセクションの見出しは #FFFFFF、補足文は rgba(255, 255, 255, 0.82) - #1463F0 と白い文字のコントラスト比が 4.5:1 以上になるか確認し、足りない場合は色の調整案を出す - アーチに文字が重ならないよう、下のセクションの上の余白をアーチの高さぶん確保する ## レスポンシブ・その他 - スマホではアーチの高さを 40px にする - 向きを逆にして、上のセクションが下に丸くふくらむ形にする書き方をコメントで補足する - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 2色・アーチの高さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。