【入門編】インライン要素へのtext-shadow適用 – HTML実践ガイド

こんにちは！Web制作の世界へようこそ。今日は、文字に「奥行き」と「命」を吹き込む魔法、`text-shadow`についてお話しします。

Webサイトを作っていると、「あれ、背景画像の上に文字を置いたら、全然読めない……！」と頭を抱える瞬間、ありますよね。そんな時、一番頼りになる相棒がこの`text-shadow`なんです。

難しい理屈は一旦置いておいて、まずは一緒に「文字に影を落とす」感覚を掴んでいきましょう！

—

1. text-shadowって何？身近な例でイメージしよう

`text-shadow`は、その名の通り「文字に影をつける」CSSのプロパティです。

例えば、晴れた日に外を歩いている自分を想像してみてください。地面には必ず影が伸びていますよね？あの影があるからこそ、私たちは「あ、ここに人が立っているんだな」と立体感を感じることができます。

Webデザインも同じです。背景がごちゃごちゃしていたり、明るすぎたりする場合、そのまま文字を置くと、文字が背景に溶け込んで迷子になってしまいます。そこで影をひとさじ加えてあげることで、文字が背景から「浮き上がり」、グッと読みやすくなるんです。

2. まずは基本の「書き方」をマスター！

呪文のように見えるかもしれませんが、実はたった4つの数字を指定するだけなんです。

/ 基本の構文： text-shadow: 横方向 縦方向 ぼかし具合 色; /
.shadow-text {
/ 右に2px、下に2px、3pxぼかして、黒い影を落とす /
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

• 横方向: プラスなら右へ、マイナスなら左へ影が飛び出します。
• 縦方向: プラスなら下へ、マイナスなら上へ影が飛び出します。
• ぼかし具合: 数字が大きいほど、影がふんわりと溶け込みます。「0」にすると、くっきりとした「昔のゲーム風」の影になります。
• 色: 影の色です。`rgba`を使うと、影の「濃さ（透明度）」を調整できるので、おすすめですよ！

3. インライン要素（a, span, strongなど）への適用

HTMLで文字の一部を強調する時に使う `` や ``、`` タグ。これらは「インライン要素」と呼ばれ、文章の中にちょこんと入り込むのが得意な要素です。