見出しコード生成用
グラデーション文字の見出し
文字そのものに色の流れをのせて、目を引く一行に。
用途・説明
文字の塗りをグラデーションにした、印象の強い見出しを作成します。プロダクトサイトのファーストビューや、新機能の告知など、ページの中で1か所だけ目立たせたい見出しに向いています。対応していないブラウザや印刷時にも文字が消えないための指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 短い言葉がおすすめ。例：Make it yours.
[サブテキスト]- 見出しの下の補足文。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「グラデーション文字の見出し」を実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - サブテキスト：[サブテキスト] ## 実装方法 - background に linear-gradient（#1463F0 から #F0719B へ、左から右）を指定する - background-clip: text（-webkit- 付きも併記）と color: transparent で、文字の形に切り抜く - 見出しは display: inline-block にし、グラデーションが文字の幅にちょうど収まるようにする - 行末の文字や、下に伸びる文字（g、y など）が切れないよう、padding-bottom を少し足す ## デザイン - 見出し：clamp(36px, 7vw, 72px)、font-weight 800、line-height 1.2、letter-spacing -0.01em - サブテキスト：16px、色 #5F6D84、見出しの 16px 下 - グラデーションを使うのは見出しのみ。サブテキストや周囲の要素は単色にする ## 対応していない環境への備え - background-clip: text が使えないブラウザでは、グラデーションの1色目の単色で表示する（@supports で切り替える） - 印刷時（@media print）と、強制カラーモード（forced-colors: active）では単色に戻す - 2行に折り返したとき、各行でグラデーションが最初から始まるようにしたい場合の書き方（box-decoration-break: clone）も補足する ## アクセシビリティ - グラデーションの中で最も薄い色でも、背景とのコントラスト比が 3:1 以上（大きな文字の基準）になること。満たさない場合は色の調整案を出す - 文字を選択したときにも読めること（::selection の色を指定する） - 見出しは適切な見出しレベル（h1 または h2）でマークアップする ## 出力形式 - [使用技術]のコードを1つ出力 - グラデーションの色と角度をCSS変数にまとめる - 色がゆっくり流れるアニメーションを付ける場合の追加コードを、任意のオプションとして添える（prefers-reduced-motion では止める）
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。