CSSでテキストに関する設定のtext-shadowプロパティ。他のテキストよりも強調させたいときなどで使います。
しかし、text-shadowプロパティの
という方がいるでしょう。
使い方の知識を深めることで、凝ったテキストデザインを作れるようになります。
そこで今回は、text-shadowプロパティの
・応用的な使い方
についてご紹介していきます。
実際にtext-shadowプロパティを設定したコードも記述していくので、簡単な設定ならばコードを参考に作れるでしょう。
ぜひチェックしてみてください。
目次
text-shadowプロパティとは
text-shadowプロパティの読み方
text-shadowは、「テキスト-シャドウ」と読みます。
テキストに対して影を付けるという意味があります。影の付け方で印象が大きく違ってきます。
text-shadowプロパティの説明
text-shadowプロパティは、読み方で説明した通り
ために使われます。
text-shadowプロパティで、テキストに影を付けると、立体的に見せたりできます。
他のテキストよりも、目に付きやすくなるので、違うページに飛ぶリンクボタンや見出しなどで使われます。
text-shadowプロパティで利用できる値
text-shadowプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| カラーネーム | カラーネームは、redなどの英単語によって色を設定できます。 |
| 16進数 | 16進数は、16種類の数やアルファベットを使い色を付けます。書き方は、#000000と16進数を短縮した#000の2つあります。 |
| RGB | RGBは、rbg(0,0,0)の数値を変えることで色を指定できる値です。RBG全て数値が0の場合黒になります。 |
| offset-x | offset-xは、水平方向に対して距離を設定します。距離がマイナスになると影が左側になります。 |
| offset-y | offset-yは、垂直方向に対して距離を決める値です。距離をマイナスにした場合、影が上側になります。 |
| blur-radius | 影をぼかすときに使う値です。値が大きくなるとぼかしが大きくなり、影も薄く広がっていきます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
text-shadowプロパティの基本的な使い方
text-shadowプロパティの使い方
text-shadowプロパティは、以下のように設定をしていきます。
See the Pen
text-shadowプロパティ使い方 by 吉井大輝 (@DaiW)
on CodePen.
テキストに影を付けるためには
|
1 |
text-shadow: 2px 2px 2px #a9a9a9; |
上記のように、「水平方向に2px」「垂直方向に2px」「ぼかしに2px」「影の色」といった順に値を書いていきます。
4つの値によって影の方向など設定できますが、「ぼかし」と「影の色」は設定しなくとも影を付けられます。
|
1 |
text-shadow: 2px 2px; |
ぼかしと影の色を設定しなかった場合、影にぼかしは入りません。影の色は影を付けるフォントの色になります。
水平方向と垂直方向の2つの値は、影を付ける上で設定が必要です。
つまり、水平方向と垂直方向の設定は必須ですが、ぼかしと影の色は設定しなくとも影を付けられるということです。
text-shadowプロパティでテキストの真後ろから影を付ける
水平方向と垂直方向の数値を0に指定して、ぼかしを付けることでテキストの真後ろから影を付けられます。
しかし、色を指定せずにぼかしの数値を指定した場合、フォントと同じ色の影が真後ろに入るので、ぼかす色の濃さによって文字が見えづらくなります。
以下のように、色のバランスを考えて影の色やぼかしを指定すると、ぼやけて光るテキストにもなります。
See the Pen
text-shadowプロパティ真後ろに影を付ける by 吉井大輝 (@DaiW)
on CodePen.
text-shadowプロパティの応用的な使い方
text-shadowプロパティはテキストに複数の影を付けられる
text-shadowプロパティは、以下のように複数の影を付けられます。
See the Pen
text-shadowプロパティ2つ以上設定 by 吉井大輝 (@DaiW)
on CodePen.
2つ目の影を設定する場合
|
1 2 |
text-shadow: 4px 4px 0px #000, 5px 5px 0px #fffafa; |
上記を見ての通り、「4px 4px 0px #000」の後ろに「,（カンマ）」を付けて、次の影である「 5px 5px 0px #fffafa;」を書いていきます。
影を複数にしてテキストが凹んでいるように見せるなど、設定次第でさまざまなテキストデザインが作れる面白さがあるプロパティですよ。
まとめ
いかがでしたか？
今回、text-shadowプロパティの設定の仕方や、応用的な使い方ついてご紹介しました。
text-shadowプロパティの設定は、デザイン性が高いテキストにも仕上げられます。
魅力的なデザインにするためには、他の方が設定したテキストデザインを見て、近いものを作ってみることです。
多く作ることで、デザイン力が身に着いていきます。
text-shadowプロパティの設定に必要な知識は、この記事で説明をしているので、ぜひ参考にしてください。
参考文献：MDN web docs｜text-shadow：CSS のプロパティで、テキストに影を追加
