【入門編】text-shadowによるインライン要素の装飾 – HTML実践ガイド

こんにちは！フロントエンドの世界へようこそ。

HTMLとCSSを学び始めると、最初は「文字を大きくする」「色を変える」といった基本に夢中になりますよね。でも、いざWebサイトを作ってみると、「背景画像の上に文字を乗せたら、色が被って全然読めない……！」なんて壁にぶつかることはありませんか？

そんな時、魔法のように文字の視認性を高めてくれるのが、CSSの `text-shadow`（テキストシャドウ） プロパティです。今日は、この「文字に影を落とす」というちょっとオシャレなテクニックを、初心者さんにも分かりやすく紐解いていきましょう。

—

そもそも、なぜ文字に「影」をつけるの？

身近な例で考えてみましょう。お買い物に行った時、看板の文字が背景の色と似ていて、なんだかぼんやりして見えにくいことってありますよね？ 逆に、文字の周りにフチ取りや影がある看板は、パッと目に飛び込んできます。

Webデザインも全く同じです。

• 視認性の確保： 背景写真の上でも文字をくっきり読ませる。
• デザイン性： 影を重ねて、文字を浮かび上がらせたり、ネオンのように光らせたりする。

この「影」というスパイスを使いこなせると、あなたのWebサイトは一気に「プロっぽい仕上がり」に変わりますよ。

—

基本のキ：text-shadowの仕組み

まずは一番シンプルな影の付け方から見ていきましょう。CSSを書くときは、この4つの数字を順番に並べるだけです。

/ 構文のルール：右へのズレ 下へのズレ ぼかし具合 色 /
.sample-text {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

• 2px（右へのズレ）： 影を右にどれくらいずらすか。
• 2px（下へのズレ）： 影を下にどれくらいずらすか。
• 4px（ぼかし）： 影の「にじみ具合」。0にするとクッキリした影になります。
• rgba(0, 0, 0, 0.5)： 影の色。最後の「0.5」は透明度（50%）です。

「難しそう…」と思う必要はありません。まずはこの数値をいじって、ブラウザ上でどう変わるか実験してみてください。失敗しても、数字を書き換えるだけでいいんです。それがフロントエンド開発の楽しいところですからね！

—

もっと面白く！影を重ねてエフェクトを作る

`text-shadow`の面白いところは、カンマ（,）で区切れば、いくつでも影を重ねられることなんです。これを使うと、ただの影ではなく「レトロな質感」や「ネオンサイン風」の表現が作れます。

1. ぷっくり浮き出る「立体感」

複数の影を重ねて、文字が浮き上がっているような演出をしてみましょう。

.pop-up-text {
color: white;
/ 影を細かく重ねて立体感を出す /
text-shadow: 1px 1px 0px #ccc,
2px 2px 0px #bbb,
3px 3px 0px #aaa;
}

2. 夜の街で光る「ネオン文字」

光の強弱を表現するために、「ぼかし」の数値を大きくした影を重ねるテクニックです。

.neon-text {
color: #fff;
/ 内側から外側へ、光の広がりを重ねる /
text-shadow: 0 0 5px #ff00de,
0 0 10px #ff00de,
0 0 20px #ff00de;
}

—

つまずきポイント：やりすぎにはご用心！

新しい技術を覚えると、つい「全部の文字に影をつけたい！」という気持ちになりますよね。でも、ここでちょっとだけ注意点です。

影は「必要な時だけ」使うのがプロのコツです。

• 可読性の低下： 影をつけすぎると、かえって文字が潰れて読みにくくなります。
• パフォーマンス： 影を多用しすぎると、古いスマートフォンなどでは表示が重たくなる原因になります。

「この文字は背景に埋もれてしまっていないかな？」という視点で、引き算のデザインを心がけてみてくださいね。

—

最後に：まずは手を動かしてみましょう

いかがでしたか？ `text-shadow`は、たった一行のコードで、あなたの言葉に「奥行き」を与えてくれる魔法の道具です。

まずは `` タグや `` タグで囲った一部分の文字に、今回紹介したコードをコピー＆ペーストして、数字を変えてみてください。「あ、ここを大きくしたら面白いかも！」という発見が、あなたの技術を一番早く成長させてくれますよ。