斜め深い影タイトル
文字の右下に向かって影が段階的に伸び、立体的な奥行きを生み出す重厚なタイトルです。CSS の text-shadow を複数重ねているのがポイントで、オフセットを 6px ・ 12px ・ 18px と少しずつ広げ、同時に rgba の不透明度を .18 ・ .12 ・ .06 と薄くしていくことで、影が遠ざかるほ…
解説
文字の右下に向かって影が段階的に伸び、立体的な奥行きを生み出す重厚なタイトルです。CSS の text-shadow を複数重ねているのがポイントで、オフセットを 6px・12px・18px と少しずつ広げ、同時に rgba の不透明度を .18・.12・.06 と薄くしていくことで、影が遠ざかるほど淡くなる自然なグラデーションを表現しています。JavaScript も画像も不要です。
合うシーン
- コーポレートサイトや製造業の力強いキービジュアル
- 建築・不動産など「どっしり感」を出したいヒーロー見出し
- 太いゴシックで存在感を出したいブランドロゴ風タイトル
影の向きは各 text-shadow のオフセット値（X・Y）を揃えて変えると調整でき、左下に伸ばすこともできます。文字色と影色を同系統にするとまとまり、影を濃くしすぎると可読性が落ちるので背景とのコントラストに注意してください。フォントウェイトは 900 前提のため、細い書体に変えると効果が弱まります。アニメーションを含まず軽量です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
影の向きを左下に変えられますか？
はい。text-shadow の X オフセット（最初の値）をマイナスにすれば左方向へ、Y オフセットを調整すれば上下方向へ影が伸びます。3 段とも同じ方向に揃えると自然です。
細いフォントでも使えますか？
使えますが効果は弱まります。この立体感は font-weight:900 の太い文字面があってこそ映えるため、できるだけ太いゴシック体で使うのがおすすめです。