text-shadowで魅せる文字を作る

皆さんは、日々様々なサイトを見ていることと思います。「このホームページの文字かっこいい」「自分もこんな雰囲気の見出しを作りたい」と思うこと、ありませんか？

文字が立体的に見えたり、おしゃれな影がついた文字って、素敵ですよね。そんな目を引く文字の装飾手法のひとつに、text-shadowプロパティがあります。

大丈夫です。一度コツをつかんでしまえば、すぐに使いこなせるようになります。

今回は、【text-shadow】の

【text-shadow】とは

「テキストシャドウ」と読みます。textは文字、shadowは影という意味です。そのままですね。

読んで字のごとく、文字に影をつけることができるプロパティです。影の方向やぼかし、色を指定することができます。

文字をただ読むだけなら平面的でも全く問題ありません。しかし、相手に「見てもらう」となれば、少しでも目を引く工夫をしなければなりませんよね。

text-shadowプロパティを使って文字に影をつけてみると、文字が浮き出したように見えます。デッサンで対象物に影をつけるのと同じです。

色や大きさ、太さに加えて立体感をだすことで、文字の印象を高めることができるのがtext-shadowプロパティです。横方向×縦方向×色の組み合わせを駆使して、オリジナルの魅せる文字を作りましょう！

【text-shadow】で利用できる値

【text-shadow】では以下の値を使うことができます。

【text-shadow】の使い方

書き方はこのようになります。

See the Pen
bGwqqYY by F Saito (@kero23)
on CodePen.

text-shadowのうしろに、length値と言われる影の方向と距離（offset-xとoffset-y）、影のぼかしの半径（blur-radius）を書いた後、色を指定します。値の間はスペースで区切ります。ひとつずつ見ていきましょう。

水平方向の距離（横方向）を指定します。正の値であれば文字の右側に、負の値であれば文字の左側に影が配置されます。

数値が大きくなるほど影が離れて表示されます。offset-xの値を0にすると、文字の真下（真上）に影が表示されるイメージです。

垂直方向の距離（縦方向）を指定します。正の値であれば文字の下側に、負の値であれば文字の上側に影が配置されます。

offset-xと同様、数値が大きくなるほど影が離れて表示されます。offset-yの値を０にすると、文字がそのまま左（右に）ずれたような影が表示されるイメージです。

この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。数値が１０を超えると、表示されるのはかなりぼやけた影です。blur-radiusを指定しない場合は、ぼかしはなくなります。

カラーコードやカラーネーム、rgbで影の色を決めることができます。ぱっと見た時の影の印象を決める大切な値です。サイトの雰囲気に合わせて、「暖色系の色にするか寒色系の色にするか」「文字と同系色の影をつけるのか、反対色の影をつけるのか」を決めましょう。

また、色の指定がない場合は、ユーザーエージェントが選択した色が使われます。どのブラウザでも同じように表示させたい時は、必ず指定するようにしましょう。

「思っていた影と全然違う影が表示されてしまった」「どのくらいの数値にしたらどの程度の影ができるのか見当がつかない」という時、活躍するのがtext-shadowジェネレーターです。色や影の方向を入力すると、text-shadowのコードを生成してくれます。

生成されたコードをコピペするだけで、簡単にtext-shadowが表示されるという優れたツールです。とても便利ですね！

また、カラーピッカーのように数値を変化させて影の状態を見ることができます。色によって影のぼやけ方が違って見えるので、影の位置を近づけたり離したりして、微調整をするのもおすすめです。

ブラウザで「text-shadowジェネレーター」と検索すると、いくつもでてきます。自分にとって使いやすいジェネレーターをさがしてみましょう。

【text-shadow】と類似する要素との違い

影をつけることができるのは、文字だけではありません。要素全体に影をつけたいときは、「box-shadow」や「drop-shadow」というプロパティを使います。このような感じです。

See the Pen
gOwmmvW by F Saito (@kero23)
on CodePen.

文字同様、要素に影がつくとおしゃれに見えますね！ただ色で囲まれた平面的な四角形よりも、ずっと印象的なデザインです。

box-shadowとdrop-shadowの使い分けはこちらでは詳しく説明しませんが、擬似要素を含むデザインの場合に使い分けをします。例えばCSSで吹き出しを作った時、吹き出し全体に影をつけるかそうでないかなどです。気になる方はチェックしてみてください。

【text-shadow】の応用的な使い方

影を同時に複数つけることもできますよ！２つ影をつけたいときは以下のようなコードになります。

See the Pen
gOwmmvW by F Saito (@kero23)
on CodePen.

影を同時に複数つける場合は、手前から奥に向けて適用されるので、最初に指定された影が一番上になります。上の例だと、ピンクの影が上になっていますね。ぜひ試してみてください。

まとめ

いかがでしたか？今回は文字に影をつけるtext-shadowプロパティをご紹介しました。

text-shadowを使いこなすことで、文字の画像を探す手間を省くことができます。また、文字装飾のバリエーションが増えることで、デザインに幅がでてますます魅力的なサイト作りができますよ。ぜひ活用してみてください。

この記事が少しでもお役に立てたらうれしいです。