背景コード生成用
大きな水玉もようの背景
淡い色の大きな丸を並べた、ポップでやさしい背景。
用途・説明
大きめの丸を互い違いに並べた、水玉もようの背景を作成します。子ども向けの教室、ベーカリーやスイーツのお店、キャンペーンの告知など、明るく楽しい雰囲気を出したいセクションに向いています。色を淡くしているので、上に文字を置いても読みやすさが保てます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「大きな水玉もようの背景」を持つセクションを実装してください。 ## 仕様 - ベース色：#FFFFFF - 水玉：#CFE0FF の20%の淡い色、直径：28px - 水玉の間隔：縦横 64px。1行おきに半分ずらして、互い違いに並べる ## 実装方法 - radial-gradient を2つ重ね、2つ目の background-position を間隔の半分だけずらす - background-size で繰り返す。画像は使わない - 水玉のふちがギザギザにならないよう、グラデーションの境目に 1px のぼかしを入れる ## 読みやすさ - 見出しは #1B2A44、補足文は #5F6D84 - 文字を置く部分は、白の半透明の帯（rgba(255, 255, 255, 0.85)）を敷くか、水玉をさらに淡くする - サンプルとして、見出し・補足文を含むセクションを1つ用意する ## レスポンシブ・その他 - スマホでは水玉の直径を 20px、間隔を 44px にする - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 水玉の色・直径・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。