CSSの「text-shadow」プロパティを使って文字を装飾しよう！

CSSの進化により、文字の装飾を簡単に行うことができます。

テキストとして表示される文字はSEO的にも有利です。

文字の装飾には様々な方法がありますが、今回はCSSの「text-shadow」プロパティを使って影をつける方法を紹介します。

text-shadowの基本的な使い方
サンプル
まとめ

text-shadowの基本的な使い方

<div style="font-size: 36px; font-weight: bold; color: #a52a2a; text-shadow: 横方向の位置 縦方向の位置 ぼかし半径 色 >文字</div>

ワードプレスですと指定のCSSがあるので(色々と面倒なので)div内で、影響を受けないようにしてあります。
横方向の位置、縦方向の位置、ぼかし半径、色の順で記述します。
横方向の位置や縦方向の位置は数値で指定します。
色は英字、16進数、rgbaのいずれかの方法で指定します。

サンプル

ここではいくつかのサンプルを紹介します。

ドロップシャドウ

<div style="font-size: 36px; font-weight: bold; text-shadow: 3px 3px 5px rgba(14, 51, 29, 0.5);">ドロップシャドウ</div>

アウトライン

<div style="font-size: 36px; font-weight: bold; color: #fff; text-shadow: -1px -1px #ff2366, -1px 1px #ff2366, 1px -1px #ff2366, 1px 1px #ff2366;">アウトライン</div>

3D風

<div style="font-size: 36px; font-weight: bold; color: #ffa500; text-shadow: -1px 0px #8b4513, 0px -1px #8b4513, 0px 1px #8b4513, 1px 0px #8b4513, 1px -2px #8b4513, 2px -3px #8b4513, 3px -4px #8b4513, 4px -5px #8b4513, 5px -6px #8b4513, 2px -1px #8b4513, 3px -2px #8b4513, 4px -3px #8b4513, 5px -4px #8b4513, 6px -5px #8b4513;">3D風</div>

フロート

<div style="font-size: 36px; font-weight: bold; color: #ffa500; text-shadow: 0 15px 10px rgba(255, 140, 4, 0.6);">フロート</div>

フラッシュ

<div style="font-size: 36px; font-weight: bold; color: #fff; background-color: #666; text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px #fff;">フラッシュ</div>

デボス

<div style="font-size: 36px; font-weight: bold; color: #000; background-color: #666; text-shadow: 0 1px rgba(255, 255, 255, 0.6);">デボス</div>

バックライト

<div style="font-size: 36px; font-weight: bold; color: #fff; background-color: black; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);">バックライト</div>

ブラー

<div style="font-size: 36px; font-weight: bold; color: rgba(0, 0, 0, 0);
  text-shadow: 0 0 6px rgba(251, 46, 83, 0.8);">ブラー</div>

リリーフ

<div style="font-size: 36px; font-weight: bold; background-color: #fff; color: #fff; text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);">リリーフ</div>

エンボス

<div style="font-size: 36px; font-weight: bold; color: #fff; text-shadow: -1px -1px rgba(255, 255, 255, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5);">エンボス</div>

エンボス背景紺色文字黒Ver.

エンボス

<div style="font-size: 36px; font-weight: bold; color: black; background-color: navy; text-shadow: -1px -1px rgba(255, 255, 255, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5);">エンボス</div>

シャドウフェード

<div style="font-size: 36px; font-weight: bold; text-shadow: 2px 2px 10px rgba(0,0,0,0.3), 2px 2px 20px rgba(0,0,0,0.2), 2px 2px 30px rgba(0,0,0,0.1), 2px 2px 40px rgba(0,0,0,0.05);">シャドウフェード</div>

グロー

<div style="font-size: 36px; font-weight: bold; color: #a52a2a; text-shadow: 0 0 10px #8a2be2, 0 0 20px #8a2be2, 0 0 30px #8a2be2, 0 0 40px #8a2be2, 0 0 50px #8a2be2, 0 0 60px #8a2be2, 0 0 70px #8a2be2;">グロー</div>

カラフル

<div style="font-size: 36px; font-weight: bold; color: #000080; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 60px #00ffff, 0 0 70px #00ffff;">カラフル</div>

ウェーブ

<div style="font-size: 36px; font-weight: bold; color: #008000; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00, 0 0 70px #00ff00;">ウェーブ</div>

まとめ

CSSの「text-shadow」プロパティを使えば、簡単に文字に影をつけることができます。これを活用することで、見出しや重要なテキストを目立たせることができます。ぜひ色々な効果を試してみて、あなたのサイトをより魅力的に演出しましょう！