こんにちは！フロントエンドの世界へようこそ。
Web制作を始めたばかりの頃、誰もが一度は「憧れのあのサイトみたいに、綺麗な背景画像の上に文字を載せたい！」と思うはずです。でも、いざやってみると……「あれ？ 背景の模様と文字の色が被って、全然読めない……」なんて経験、ありませんか？
今日は、そんな「読めない！」という悲劇を、魔法のように解決するCSSのテクニック「text-shadow」について、現場の知恵を交えてお話ししますね。
—
なぜ文字は背景に「埋もれて」しまうのか
例えば、お気に入りのカフェのメニューボードを想像してみてください。白いチョークで書かれた文字は、黒板の上だとクッキリ見えますよね。でも、もし黒板が木目調で、さらにその上に複雑な模様が描かれていたらどうでしょう？
Webサイトでも同じことが起きています。背景画像が明るかったり複雑だったりすると、文字と背景のコントラスト（明暗の差）がなくなってしまい、脳が「これは文字だ」と認識するのに一生懸命働かなきゃいけなくなるんです。これ、読んでいる人にとっては結構なストレスなんですよ。
—
救世主「text-shadow」の登場
そんな時、CSSの`text-shadow`を使えば、文字の周りにほのかに影をつけることで、背景から文字を「浮き上がらせる」ことができます。
まずは、一番シンプルな書き方を見てみましょう。
.hero-text {
/ text-shadow: 横方向のズレ, 縦方向のズレ, ぼかし具合, 色; /
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
このコードを分解するとこうなります。
1. 2px 2px: 文字からどれくらい影をずらすか（右と下に少しだけずらすと、立体感が出ます！）
2. 4px: 影をどれくらいぼかすか（数字が大きいほど、ふんわりとした柔らかい影になります）
3. rgba(0, 0, 0, 0.5): 影の色。黒を50%の透明度（0.5）にすることで、悪目立ちせず、自然に文字を浮かび上がらせます。
—
「読みやすさ」を極めるためのコツ
現場のプロとして、少しだけこだわりのテクニックを伝授しますね。影を濃くしすぎると、逆に文字が滲んで見えてしまうことがあります。
ポイントは「影はあくまで黒子（くろご）」だということ。
主張しすぎない程度の薄い影を添えるだけで、不思議と「あ、なんかこのサイト見やすいな」というプロっぽい仕上がりになるんです。
もっと読みやすくしたい時は？
もし背景画像がすごく複雑なら、影だけでなく「黒い透過フィルター」を背景画像の上に乗せるのも一つの手です。
.container {
background-image: url(‘photo.jpg’);
background-color: rgba(0, 0, 0, 0.3); / 画像の上に薄い黒幕を置くイメージ /
background-blend-mode: multiply; / 画像と黒幕を綺麗に馴染ませる魔法 /
}
—
気になる「パフォーマンス」の話
「影をつけると、サイトが重くなりませんか？」と質問されることがあります。
結論から言うと、`text-shadow`くらいであれば、現代のスマホやPCなら全く問題ありません！ ご安心ください。ただし、アニメーションで文字を激しく動かしながら影をつけたり、何百個もの文字に派手な影をつけたりすると、少しだけ負荷がかかることもあります。
基本的には「ここぞという見出し」に使う分には、パフォーマンスを気にして我慢する必要なんて全くありませんよ。
—
最後に：失敗しても大丈夫
Web制作は、まさに「トライ＆エラー」の繰り返しです。
「影の色を黒じゃなくて、あえてオレンジにしてみたらどうなるかな？」
「ぼかしをもっと強くしたら、夢の中みたいな雰囲気にならないかな？」
そんなふうに、まずは気軽に数値をいじってみてください。コードを書いて、保存して、ブラウザをリロードする。その瞬間に自分の思い通りに画面が変わる喜びこそが、この仕事の醍醐味です。
もし「思ったようにならないな……」と悩んだら、それはあなたが上達している証拠です。一つひとつ、納得いくまで調整してみてくださいね。あなたのサイトが、世界中の誰かにとって見やすい素敵な場所になりますように！
それでは、また次回の記事でお会いしましょう！Happy Coding!
コメント