背景コード生成用
プラス記号のパターン背景
小さな「＋」を等間隔に並べた、設計図のような背景。
用途・説明
小さなプラス記号を等間隔に並べたパターン背景を作成します。ドットより少しだけ存在感があり、テック系、設計・建築、ポートフォリオなど、きちんとした印象のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[背景色]- 例：#FFFFFF
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「プラス記号のパターン背景」を持つセクションを実装してください。 ## 仕様 - 背景色：[背景色] - 記号の色：#C3D4F2 - 記号の大きさ：10px 四方、線の太さ 1.5px、間隔：32px ## 実装方法 - プラス記号はSVGを data URI にして background-image に指定するか、linear-gradient を2つ重ねて描く。外部の画像ファイルは使わない - 背景用のクラス（例：.bg-cross）として定義する - 下に向かって薄くなるよう、mask-image の linear-gradient でフェードさせる - サンプルとして、見出し・本文を含むセクションを1つ用意する ## 読みやすさ - 記号は淡い色にして、文字より目立たないようにする - 文字の背後に記号が重なって読みにくい場合は、文字の下に背景色の面を敷く ## レスポンシブ・その他 - スマホでも記号の大きさと間隔は変えない - マスクが効かない環境でも読めるよう、記号の色は背景とのコントラストを弱めにしておく - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 記号の色・大きさ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。