背景コード生成用
控えめなドットパターン背景
細かなドットで、無地より少しだけ表情のある背景に。
用途・説明
セクションの背景に敷く、目立ちすぎないドットパターンをCSSで作成します。単調になりがちな長いページで、セクションの切り替わりを自然に示したいときに便利です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ドットの間隔]- 例：20px
プロンプト全文
あなたはフロントエンドエンジニアです。 CSSのみで、控えめなドットパターン背景を実装してください。 ## デザイン - ベース色：#FFFFFF - ドットの色：#C3D4F2 - ドットの直径：2px、間隔：[ドットの間隔]（縦横とも同じ） - セクション上端から下に向かってドットが薄くなるフェードをかける（mask-image を使用） ## 実装条件 - 画像ファイルは使わず、radial-gradient と background-size で実現する - 背景用のクラス（例：.bg-dots）として定義し、任意のセクションに付けて使えるようにする - コンテンツは背景より前面に表示され、ドットが文字と重なっても読みやすいこと - サンプルとして、見出し・本文・ボタンを含むセクションを1つ用意する ## レスポンシブ・アクセシビリティ - 高解像度ディスプレイでもドットがにじまないこと - 文字と背景のコントラスト比4.5:1以上 - 印刷時（@media print）は背景パターンを非表示にする ## 出力形式 - HTMLとCSSを1セット出力 - ドットの色・大きさ・間隔をCSS変数で調整できるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。