背景コード生成用
ノートの罫線風の背景
横線が等間隔に並ぶ、ノートのような背景。
用途・説明
ノートの罫線のように、細い横線が等間隔に並ぶ背景を作成します。学習サービス、塾、日記やメモのアプリ、手書き風のブログなどに向いています。文字の行の高さと罫線の間隔をそろえる指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[背景色]- 例：#FFFFFF
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「ノートの罫線風の背景」を持つセクションを実装してください。 ## 仕様 - 背景色：[背景色] - 罫線の色：#D5E0F3、太さ 1px - 罫線の間隔：32px ## 実装方法 - 画像は使わず、repeating-linear-gradient で描く - 本文の line-height を罫線の間隔と同じ 32px にし、文字が罫線の上に乗るように位置を合わせる - 左に縦の余白線（赤系の淡い線）を1本入れるバリエーションも併記する - 背景用のクラス（例：.bg-notebook）として定義する ## 読みやすさ - 罫線は淡い色にして、文字より目立たないようにする - 文字と背景色のコントラスト比を 4.5:1 以上にする - 見出しなど大きな文字は、罫線2行ぶんの高さにそろえる ## レスポンシブ・その他 - スマホでは罫線の間隔と line-height を 28px にする - 文字サイズを変えても罫線とずれないよう、間隔と行の高さを同じCSS変数から取る - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 線の色・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。