背景コード生成用
斜めストライプの背景
細い斜線の繰り返しで、軽い動きのあるセクションに。
用途・説明
淡い2色の斜めストライプをCSSだけで描く背景を作成します。キャンペーンの告知帯、お知らせバー、強調したいセクションの背景などに向いています。色の差を小さく抑える指定にしているので、上に置いた文字の読みやすさを損ないません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[背景色]- 例：#FFFFFF
[ストライプの幅]- 例：12px
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「斜めストライプの背景」を持つセクションを実装してください。 ## 仕様 - 背景色：[背景色] - ストライプの色：#EBF2FF - ストライプの幅：[ストライプの幅]（色のある帯と背景色の帯を同じ幅で交互に） - 角度：135deg（右上がり） ## 実装方法 - 画像は使わず、repeating-linear-gradient で描く - 背景用のクラス（例：.bg-stripes）として定義し、任意のセクションに付けて使えるようにする - 色の境目がにじまないよう、色の停止位置を同じ値で重ねてくっきり切り替える - サンプルとして、見出し・本文・ボタンを含むセクションを1つ用意する ## 読みやすさ - 2色の明度差は小さく保ち、ストライプが文字より目立たないようにする - 文字と、ストライプの濃い方の色とのコントラスト比を4.5:1以上にする - 本文が長い場合は、文字の下に背景色の面（角丸12px、padding 24px）を敷く例も示す ## レスポンシブ・その他 - スマホでもストライプの幅は変えない（細かくしすぎるとちらついて見えるため） - アニメーションは付けない - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - ストライプの色・幅・角度をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。