こんにちは！Web制作の世界へようこそ。
HTMLやCSSを触り始めると、「文字をもう少しおしゃれにしたいな」「何かインパクトが欲しいな」と思う瞬間が必ずやってきますよね。そんなとき、Photoshopのような重たい画像編集ソフトを開かなくても、CSSのたった一行でテキストを劇的に変身させられる魔法のようなプロパティがあるんです。
それが、今回紹介する `text-shadow`（テキストシャドウ） です。
「影をつけるなんて難しそう……」なんて思わなくて大丈夫ですよ。今日は、このプロパティを「お化粧」のような感覚で、楽しくマスターしていきましょう！
—
1. text-shadowの基本：影の「住所」を決めてあげよう
`text-shadow`は、名前の通り「テキストに影を落とす」ためのCSSです。まずは、この影をどこに配置するか、4つの数値を指定してあげます。
お買い物で例えるなら、「どの方向に、どれくらい離して、どんな色を置くか」という注文書を作るようなものですね。
/ 基本の構文 /
.text {
/ 左から順に：横方向、縦方向、ぼかし具合、色 /
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
- 横方向 (2px)：プラスだと右、マイナスだと左に影がズレます。
- 縦方向 (2px)：プラスだと下、マイナスだと上に影がズレます。
- ぼかし具合 (4px)：この数字が大きいほど影がフワッと広がり、0にするとクッキリした影になります。
- 色 (rgba…)：影の色です。「黒」をそのまま使うよりも、`rgba`を使って少し透明度（0.5など）を入れてあげると、プロっぽい優しい影になりますよ。
—
2. 複数の影を重ねる！「ネオンサイン」の作り方
`text-shadow`の面白いところは、カンマ（`,`）で区切ることで、影をいくつでも重ねられるという点です。
これを応用すると、夜の街で光り輝く「ネオンサイン」のような表現が簡単に作れます。影を何重にも重ねて、内側から光が漏れているような演出をするんです。
.neon-text {
color: #fff; / 文字自体は真っ白に /
background-color: #000; / 背景を黒にすると映えます /
/ 影をカンマで繋いで重ねる！ /
text-shadow:
0 0 5px #fff, / 中心に近い白い光 /
0 0 10px #ff00de, / ピンクの光の輪 /
0 0 20px #ff00de, / さらに大きく広がるピンク /
0 0 40px #ff00de; / 一番外側のぼんやりした光 /
}
「こんなに書くの？」と驚きましたか？ でも大丈夫。これは「光のグラデーション」を作っているだけなんです。一番上の影で芯を作り、下の影で周りの光を広げる……。そう考えると、少しずつ積み上げていくプラモデルのような楽しさがありますよね。
—
3. 初学者がつまずきやすい「落とし穴」
ここで、多くの人が一度はハマるポイントをそっとお伝えしておきますね。
「影が濃すぎて文字が読めない！」
初心者の頃は、つい影の色を真っ黒（`#000`）にしてしまいがち。でも、それだと文字が潰れて読みづらくなってしまいます。
ポイントは「透明度」です。 `rgba(0, 0, 0, 0.3)` のように、最後の数値を0.2〜0.4くらいにしてみてください。これだけで、影が背景にスッと馴染んで、デザインがグッと洗練されますよ。
「影が動かない？」
もし影が出ないときは、`text-shadow`のスペルミスがないか確認してみてください。また、ブラウザのキャッシュが残っていて更新されていないこともよくあります。そんなときは、ブラウザの「スーパーリロード（Ctrl + F5 など）」を試すのが、現場でよくやる解決策の一つです。
—
まとめ：失敗しても大丈夫！
Webデザインにおいて、CSSのプロパティは「正解」があるようでいて、実は「あなたの好みが正解」の世界です。
`text-shadow`で影を深くしてレトロな雰囲気にしたり、あえてぼかしを無くしてポップな漫画風にしたり。まずはコードをコピーして、数値を「10px」にしてみたり「赤色」に変えてみたりして、画面の変化を楽しんでみてください。
その小さな「動いた！楽しい！」という体験こそが、あなたを一流のフロントエンドエンジニアへと成長させる一番の近道です。
さあ、次はどんな文字を飾ってみますか？ 応援しています！
コメント