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

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

投稿日:2020年12月26日（最終更新日:2023年01月16日）

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

text-shadowプロパティとは？

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

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

text-shadowの使い方

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

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

水平（横）方向の位置
垂直（縦）方向の位置
影のぼかしの範囲（長さ）【省略可】
影の色【省略可】

HTML

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

CSS

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

プレビュー

影の表示位置を変更する

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;
}

プレビュー

ダミーテキスト

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

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