背景コード生成用
ジグザグのセクション区切り
ギザギザの境目で、元気よくセクションを切り替える。
用途・説明
上下のセクションの境目を、三角のギザギザでつなぐ区切りを作成します。キャンペーン、イベント、子ども向け、飲食店など、にぎやかで元気な印象を出したいページに向いています。画面幅が変わっても山の形が崩れません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[上のセクションの背景色]- 例：#FFFFFF
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「ジグザグのセクション区切り」を持つセクションを実装してください。 ## 仕様 - 上のセクションの背景色：[上のセクションの背景色] - 下のセクションの背景色：#1463F0 - 山の高さ：24px、山ひとつの幅：48px ## 実装方法 - 下のセクションの上端に、疑似要素（::before）でギザギザを描く - linear-gradient を2つ（45deg と -45deg）重ねて三角を作り、background-size で横に繰り返す。画像やSVGファイルは使わない - 山の幅は固定にし、画面幅が変わっても形が伸び縮みしないようにする - 境目に 1px のすき間が出ないよう、上のセクションと 1px 重ねる ## 読みやすさ - 下のセクションの文字色は、背景色に対してコントラスト比 4.5:1 以上になる色にする - ギザギザに文字が重ならないよう、下のセクションの上の余白を山の高さぶん増やす ## レスポンシブ・その他 - スマホでは山の高さを 16px、幅を 32px にする - 上下を逆にした（上向き・下向き）バリエーションも併記する - ギザギザは装飾なので、スクリーンリーダーに読み上げられない実装にする - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 色・山の高さ・幅をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。