• HOME > 
  • CSS > 
  • CSSのtext-shadowの使い方【文字に影をつけたり縁...

CSSのtext-shadowの使い方【文字に影をつけたり縁取りできるプロパティ】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2020年12月26日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

text-shadowプロパティとは?

text-shadowは、文字に影をつけるためのプロパティです。文字の影はドロップシャドウとも呼ばれます。

次の例のように、影の濃さや色、範囲・位置を自由に設定することが可能です。

text-shadowの例

text-shadowの使い方

text-shadowは次のように、「水平位置・垂直位置・影のぼかし範囲・色」という値を記述して使用します。

text-shadowの書き方

影の設定は、記述する順番によって意味合いが変わってしまうので注意してください。左から順につぎのように決められていて、影のぼかしの範囲と色は省略することができます。

  1. 水平(横)方向の位置
  2. 垂直(縦)方向の位置
  3. 影のぼかしの範囲(長さ)【省略可】
  4. 影の色【省略可】

HTML

<p class="sample1">ダミーテキスト</p>

CSS

.sample1{
    text-shadow:5px 5px 5px #333;
}

プレビュー

text-shadowの例

影の表示位置を変更する

text-shadowは文字の位置を基準の「0」として、そこから正と負(マイナス)の数値を使って上下左右に自由に移動することができます。

水平方向正の値右へ移動
負の値左へ移動
垂直方向正の値下へ移動
負の値上へ移動

水平方向・垂直方向両方とも0を指定することもできます。文字の真下(真後ろ)に影ができるので、ぼかしの範囲を省略すると影が認識できません。

HTML

<p class="sample1">ぼかしなし</p>
<p class="sample2">ぼかしあり</p>

CSS

.sample1{
    text-shadow:0px 0px;
}
.sample2{
    text-shadow:0px 0px 5px;
}

プレビュー

ぼかしなし
ぼかしあり

影のぼかし範囲(長さ)を指定する

ぼかし範囲は省略もしくは0を指定すると文字と同じ形の影が表示され、数値を大きくすれば影は範囲は大きくなりますが同時に濃さが薄くなっていきます。

HTML

<p class="sample1">ダミーテキスト</p>
<p class="sample2">ダミーテキスト</p>
<p class="sample2">ダミーテキスト</p>

CSS

.sample1{
    text-shadow:0px 0px 5px;
}
.sample2{
    text-shadow:0px 0px 15px;
}
.sample3{
    text-shadow:0px 0px 25px;
}

プレビュー

ダミーテキスト
ダミーテキスト
ダミーテキスト

影の色を指定する

最後に影の色を変更します。色名・カラーコード・RGBのいずれかで指定します。省略した場合は文字の色が適用されます。

HTML

<p class="sample1">ダミーテキスト</p>
<p class="sample2">ダミーテキスト</p>
<p class="sample2">ダミーテキスト</p>

CSS

.sample1{
    text-shadow:0px 0px 10px red;/*赤*/ 
}
.sample2{
    text-shadow:0px 0px 10px #0000d4;/*青*/
}
.sample3{
    text-shadow:0px 0px 10px rgb(255,255,0);/*黄色*/
}

プレビュー

ダミーテキスト
ダミーテキスト
ダミーテキスト

複数の影を重ねる方法

text-shadowはカンマで区切って記述することで、複数の影を重ねて表示させることもできます。

HTML

<p class="sample1">ダミーテキスト</p>

CSS

.sample1{
    text-shadow:-1px -1px 5px #d4ff00,5px 5px 5px #0000d4,-5px -5px 5px #d40000;/*3色の影を付ける*/
}

プレビュー

ダミーテキスト

text-shadowで文字を縁取りする方法

text-shadowを応用すると、影を使って文字の縁取りを行うことができます。次のように複数の影を上下左右にずらして表示することで、縁取りしているように見せることができます。

HTML

<p class="sample1">ダミーテキスト</p>

CSS

.sample1{
    color:#ffffff;
    /*文字を縁取る*/
    text-shadow:1px 1px #000000,
                1px -1px #000000,
                -1px 1px #000000,
                -1px -1px #000000;
}

プレビュー

ダミーテキスト

ひとつスタイルを用意しておけば、文字を修正しても自動的に縁取り文字で表示できるので便利です。

しかしながら、あくまで影を利用した応用技なので拡大してみるとつなぎ目が途切れていることがわかります。綺麗な縁取り文字にこだわる場合は描画ソフトなどで画像として用意した方が良いかもしれません。

text-shadowが効かないときは?

text-shadowを指定したのに思い通りに反映されない場合は、次のような点を確認してみましょう。

  • コードに記述ミスはないかどうか?
  • 同じセレクターで重複して指定していないか?
  • セレクターの優先順位は正しいかどうか?

コードに記述ミスはないかどうか?

CSSはスペルミスやコロン・セミコロンを付け忘れているだけで反映されなくなりますので今一度確認してみてください。text-shadowの箇所以外が間違っていても同様ですので遡ってチェックしましょう。

同じセレクターで重複して指定していないか?

CSSは同じセレクターの場合、後から記述したものが優先されます。同じセレクターでtext-shadowを指定していないか確認してみてください。

セレクターの優先順位は正しいか?

同じ要素でもCSSのセレクターには優先順位があり、基本としてはタグよりもクラス、クラスよりもIDに指定した値が優先されます。以前に別のセレクターを使ってtext-shadowを指定していないかなど確認してみてください。

リンク先のサムネイル
CSSのセレクターとは?【種類と使い方をわかりやすく解説】

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。このページではセレクターの種類と使い方を解説します。セレクタ―を使ってスタイルを指定することで...【もっと読む】

まとめ

以上が、CSSのtext-shadowプロパティの使い方です。

影を付けるだけで立体感が増して文字を印象付けることができます。しかしながら、多用しすぎると見づらくなったり安っぽさが出てしまうので注意が必要です。影の色や位置など、他のサイトのデザインを研究して使って見ましょう。

広告
広告

関連する記事

サムネイル

CSSの疑似クラスnth-childとnth-of-type……

2024年11月07日
疑似クラスnth-childとnth-of-typeについて CSSの疑似クラス「:nth-child」と「:nth-of-type」はどちらも何番目の要素とい […]
サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。