text-shadow

テキストシャドウ（テキストとフォント）

意味テキストに影をつける

text-shadowとは？

text-shadowプロパティは、テキストに影をつけるために使うプロパティです。影の位置、ぼかしの範囲、色を指定することができます。これにより、テキストが立体的に見えたり、デザインに奥行きを与える効果があります。

text-shadowの具体的な使い方

テキストに影をつける例

<style>
    p {
        text-shadow: 2px 2px 2px #000000;
    }
</style>
<p>このテキストには影がついています。</p>

p（段落）要素のテキストに、影を追加しています。

テキストに複数の影をつける例

<style>
    .multiple-shadows {
        text-shadow: 1px 1px 2px red,
                     0 0 1em blue,
                     0 0 0.2em blue;
    }
</style>

<p class="multiple-shadows">この文字は複数の影を持っています。</p>

複数の影を指定して、より複雑な効果を作成します。

text-shadowに関するよくある質問

Q. text-shadowの値の順序は？

A. 順序は「水平方向のずれ」「垂直方向のずれ」「ぼかしの半径」「色」です。ぼかしと色は省略可能です。

Q. 影を内側につけるには？

A. text-shadowでは内側の影を作成できません。内側の影が必要な場合は、-webkit-text-strokeなどの他のプロパティと組み合わせる必要があります。

Q. パフォーマンスへの影響は？

A. 多数のtext-shadowを使用したり、大きなぼかし半径を指定すると、ページのレンダリング速度に影響を与える可能性があります。必要最小限の使用を心がけましょう。

text-shadowが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのtext-shadowやfont-variant、white-space、text-transform、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。