Webデザインにおけるディテールは、ウェブサイトやブログの見た目を一変させる魔法のような要素です。その中でもテキストの影、すなわちtext-shadowプロパティは、シンプルなテキストを魅力的に見せる強力なツールとなります。今回はこのtext-shadowの使い方について、初心者向けに詳しく解説していきます。
text-shadowとは？
text-shadowはCSSのプロパティの一つで、文字に影を追加する際に使用されます。このプロパティを使えば、テキストに立体感や奥行きを持たせることができ、デザインに深みを持たせることが可能です。
基本的な使い方
text-shadowの基本的な文法は以下の通りです。
text-shadow: 横のオフセット 垂直のオフセット ぼかしの範囲 色;
| プロパティ | 説明 |
|---|---|
| 横のオフセット | 影がテキストから右にどれだけ離れているかを指定。負の値を使うと左に移動。 |
| 垂直のオフセット | 影がテキストから下にどれだけ離れているかを指定。負の値を使うと上に移動。 |
| ぼかしの範囲 | 影の外縁がどれだけぼかされるかを指定。0にすると、ぼかし効果はなく鮮明な影となる。 |
| 色 | 影の色を指定。 |
実例で見る基本の使い方
例えば、以下のようにCSSを記述すると、h1タグのテキストに右下方向への灰色の影を追加できます。
h1 {
text-shadow: 2px 2px 5px gray;
}
テキストに右下方向への灰色の影を追加できます。
応用編 複数の影をつける
text-shadowは、カンマ区切りで複数の影を指定することも可能です。これにより、より独自かつ高度なデザインを表現することができます。
h1 {
text-shadow: 2px 2px 5px gray, -2px -2px 5px blue;
}
この例では、h1タグのテキストに、右下方向に灰色の影と、左上方向に青色の影の2つが同時に付きます。
複数の影を指定することも可能です。
よくある質問（FAQ）
Q. CSSでテキストに影を付けるには？
A. text-shadow: 水平オフセット 垂直オフセット ぼかし半径 色; の形式で設定します。例：text-shadow: 2px 2px 4px rgba(0,0,0,0.5)。複数の影をカンマ区切りで重ねることもできます。
Q. text-shadowとbox-shadowの違いは？
A. text-shadowはテキスト（文字）に対して影を追加します。box-shadowはボックス（要素）全体に影を追加します。両者を組み合わせて異なる影効果を作ることもできます。
Q. CSSで光彩（グロー）エフェクトをテキストに付けるには？
A. text-shadowのぼかし半径を大きくして同色のシャドウを重ねます。例：text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;で青緑色のグロー効果が作れます。
まとめと注意点
text-shadowプロパティは、簡単な記述でテキストに魅力を加えることができます。ただし、使用する際には以下の点に注意してください。
- 一部の古いブラウザではtext-shadowがサポートされていない可能性があります。互換性を気にする場合は、サポートブラウザを確認しましょう。
- 影の方向や大きさは、オフセット値を調整することで自由に変更することができます。
デザインはディテールから。text-shadowを駆使して、あなたのウェブページをさらに魅力的にしてみてください。
