極太アンダーライン強調
テキストの下半分に極太の単色ラインを敷いて強調する装飾です。 span の background-image に linear-gradient(transparent 80%, #667eea 80%) を指定し、上 80% を透明・下 20% だけを塗ることで、文字に重なる太いアンダーラインを表現しています。
解説
テキストの下半分に極太の単色ラインを敷いて強調する装飾です。span の background-image に linear-gradient(transparent 80%, #667eea 80%) を指定し、上 80% を透明・下 20% だけを塗ることで、文字に重なる太いアンダーラインを表現しています。通常の text-decoration:underline より太く、位置も文字の下端付近に固定できるのが特徴です。画像も JS も使わず、対象語を span で囲むだけで適用できます。
使いどころ
- CTA 周辺のキャッチコピーの一語強調
- ブランドメッセージやスローガンの核となる語
- 見出し内で特に読ませたいフレーズ
ラインの色は #667eea を、太さはグラデーションの境界 80% を変えて調整します（数値を下げると太くなります）。文字色とラインの相性を見ながらコントラストを確保してください。マーカー風（半透明）と違い不透明の単色なので、はっきりと力強い印象になります。強調する語は 1 文に 1 か所程度に絞ると、視線が散らず効果が高まります。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
下線の太さや色はどう変えますか
色は linear-gradient の #667eea を、太さは透明と色の境界である 80% を変更します。80% を 70% などに下げるとラインが太くなります。
普通の下線と何が違いますか
text-decoration の下線より太く、文字に重なる位置に置けるため強調感が強いのが違いです。背景グラデーションで描くので太さや位置を自由に調整できます。