text-shadowプロパティは、テキストに影を付けるために使用されます。このプロパティを利用することで、テキストに立体感や装飾効果を与えることができます。
INDEX
text-shadowの値とその効果の一覧
- 2px 2px 4px rgba(0, 0, 0, 0.5): 2pxの水平と垂直方向の影が付き、ぼかし半径は4px、影の色は半透明の黒。
- 5px 5px 10px rgba(0, 0, 0, 0.7): 大きな影で、5pxのずれと10pxのぼかし、影の色はやや暗い黒。
- 3px 3px 5px red: 赤い影を付けます。影のずれは3px、ぼかしは5px。
- 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 0, 0, 0.5): 複数の影を使い、異なる方向に黒と赤の影が付く。
注意点と関連情報
text-shadowプロパティは、影のオフセット（水平、垂直）、ぼかし半径、影の色を指定できます。オフセットは必須ですが、ぼかしと色は省略可能です。また、複数の影をカンマで区切って指定することも可能です。
text-shadowが効かない時の原因と対策
インライン要素に適用されていない
text-shadowは、インライン要素やインライン要素を含むブロックレベル要素に対して適用されます。ブロックレベル要素に直接適用しても、テキストがないと効果が見えません。
対策: インライン要素（<span>, <a>, <em>など）にtext-shadowを適用します。例えば、<span style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);">のように指定します。
filterプロパティが影響している
filterプロパティが設定されていると、text-shadowが見えにくくなることがあります。例えば、blurフィルターが適用されている場合、影がさらにぼやけて視覚的にわかりにくくなることがあります。
対策: filterプロパティが影響していないか確認し、必要に応じて調整します。filter: none;または影響のない値に設定して、text-shadowの効果を確認します。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
}
.css-sample-text {
font-size: 24px;
border: 1px solid #999;
padding: 10px;
background-color: white;
}text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
基本的な影を付けた例です。影の色は半透明の黒です。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-shadow-default">
これはtext-shadowの基本例です。
</div>
</div>CSSコード
.css-sample-text-shadow-default {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}表示結果
これはtext-shadowの基本例です。
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7)
影のずれが大きく、ぼかしも強い例です。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-shadow-large">
これは大きな影の例です。
</div>
</div>CSSコード
.css-sample-text-shadow-large {
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
}表示結果
これは大きな影の例です。
text-shadow: 3px 3px 5px red
赤い影を付けた例です。影の色を指定しています。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-shadow-color">
これは赤い影の例です。
</div>
</div>CSSコード
.css-sample-text-shadow-color {
text-shadow: 3px 3px 5px red;
}表示結果
これは赤い影の例です。
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 0, 0, 0.5)
複数の影を使った例で、異なる方向に黒と赤の影が付きます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-shadow-multiple">
これは複数の影の例です。
</div>
</div>CSSコード
.css-sample-text-shadow-multiple {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 0, 0, 0.5);
}表示結果
これは複数の影の例です。
まとめ
- text-shadowプロパティは、テキストに影を付けて立体感や装飾を加えるために使用されます。
- 影のオフセット（水平、垂直）とぼかし半径、影の色を指定できます。
- 複数の影をカンマで区切って指定することも可能です。
- 影のオフセットが必須ですが、ぼかし半径や影の色は省略可能です。