「タイトルをおしゃれなグラデーション文字にしたい」という要望はよくあります。CSSだけで実現できますが、書き方が少し独特です。AIにお願いすれば、一瞬でコードを生成できます。
方法①：既存のHTMLからCSSだけ生成する
すでにHTMLにh1タグがある場合は、CSSだけを生成してもらいましょう。
AIへのプロンプト例
以下のh1タグに、青から紫のグラデーション文字を適用するCSSを書いてください。
文字全体がグラデーションになるようにしてください。
<h1 class="page-title">Web制作の基礎を学ぼう</h1>生成されたCSS例
.page-title {
background: linear-gradient(90deg, #3e8685, #6b4fa8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2rem;
font-weight: bold;
}📝 用語メモ
-webkit-background-clip: text：背景色をテキスト部分だけに切り抜く指定。-webkit-text-fill-color: transparent と組み合わせることで文字がグラデーションに見えます。
方法②：HTMLとセットで生成する
HTMLの構造からまるごと作ってほしい場合は、セットで依頼しましょう。
AIへのプロンプト例
グラデーション文字のh1タイトルをHTMLとCSSでまとめて作ってください。
グラデーションは左から右に向かって、ティール（#3e8685）からネイビー（#1a2f5f）の2色でお願いします。
classやidは任意でつけてください。生成されたHTML例
<h1 class="gradient-title">Web制作の基礎を学ぼう</h1>生成されたCSS例
.gradient-title {
background: linear-gradient(90deg, #3e8685 0%, #1a2f5f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.3;
}📝 用語メモ
clamp(最小値, 推奨値, 最大値)：画面幅に応じてフォントサイズを自動調整する関数。モバイルからPCまで綺麗に表示されます。
AIへ依頼するときのポイント
- 使いたい色を具体的に（カラーコードで）伝えると精度が上がります
- グラデーションの方向（左から右、斜めなど）も指定しましょう
- 「インラインblock」にしないとグラデーションがうまく出ないことがあるので、うまく表示されない場合はその旨も伝えてみましょう
