グラデーションテキストは、background-clip: text で文字を滑らかな色のブレンドで塗る手法です——数多くのヒーロー見出しやランディングページで使われています。アニメーションを有効にすると、グラデーションが文字の中をゆっくり流れます。
Frequently Asked Questions
Q: ブラウザでグラデーションが表示されないのはなぜ?
ブラウザでグラデーションが表示されないのはなぜ?-webkit-background-clip: text と -webkit-text-fill-color: transparent が必要です。どちらも出力に含まれているので、CSSミニファイヤーに削除されていないか確認してください。
Q: グラデーションテキストは全ブラウザで動きますか?
グラデーションテキストは全ブラウザで動きますか?はい——Chrome、Edge、Safari、Firefoxすべてが background-clip: text に対応しています。古いブラウザは先に単色フォールバックを設定すれば単色表示になります。
Q: ボタンに使えますか?
ボタンに使えますか?可能ですが、ボタンは操作を担うため、高コントラストの単色ラベルを推奨。グラデーションテキストは見出しや装飾タイトルに使いましょう。
Q: 3色以上にするには?
3色以上にするには?出力の linear-gradient を編集し、色ストップを追加します(例:linear-gradient(90deg, red, yellow, blue))。
Q: SEOとアクセシビリティに問題はありませんか?
SEOとアクセシビリティに問題はありませんか?テキストは本物のHTMLテキストのままなのでSEOに影響なし。コントラストを高く保ち、本文での使用は避けて可読性を守りましょう。
日本の伝統色・和色
和色は平安時代の襲(かさね)の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか?
和色とは何ですか?和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか?
山吹色はどんな色ですか?山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。