背景コード生成用
細いグリッド線の背景
方眼のような細い線で、整った印象のセクションに。
用途・説明
細い線の方眼パターンをCSSだけで描き、中央に向かって薄くなるようにぼかした背景を作成します。開発者向けサービスやSaaSのヒーロー、機能紹介セクションの背景に向いています。文字の読みやすさを保つため、線の濃さとフェードのかけ方を指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[背景色]- 例：#FFFFFF
[マス目の大きさ]- 例：32px
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「細いグリッド線の背景」を持つセクションを実装してください。 ## 仕様 - 背景色：[背景色] - 線の色：#D5E0F3 - マス目の大きさ：[マス目の大きさ] ## 実装方法 - 画像は使わず、linear-gradient を縦横2枚重ねて 1px の線を描く - グリッドはセクションの疑似要素（::before）に描き、position: absolute で全面に敷く - mask-image の radial-gradient で、中央（テキストがある位置）ほど線が薄く、外側ほど見えるようにする - マスクが効かない環境でも読めるよう、線の色は背景とのコントラストを弱めにしておく ## デザイン - 線の太さは 1px。高解像度の画面でもぼやけないようにする - グリッドは上下左右の端でセクションの外に続いて見えるよう、端で途切れた印象にしない - コンテンツ（見出し・本文・ボタン）は中央に配置し、z-index でグリッドより前面に出す ## レスポンシブ - スマホではマス目を一回り小さくする（例：24px） - 背景は background-attachment: fixed を使わない（スマホでの描画負荷を避ける） ## アクセシビリティ - グリッドの上に置くテキストと背景のコントラスト比は 4.5:1 以上 - 背景は装飾なので、疑似要素で描いてHTMLに余計な要素を増やさない ## 出力形式 - [使用技術]のコードを1つ出力 - マス目の大きさ・線の色・フェードの強さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。