CSS | text-shadow | 文字の影

text-shadowは文字の影を指定するためのCSSプロパティです。

文字の影にはtext-shadow、ボックスの影にはbox-shadowを使います。

影を付けるCSSプロパティ
CSSプロパティ	対象
`text-shadow`	文字
`box-shadow`	ボックス

概要

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

実行結果初期状態

sample

.sampleクラスにtext-shadow: 0 0 7px red;と指定します。赤い影ができます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 0 7px red;
}

実行結果0 0 7px red;

sample

redの設定をgreenと#359に変更してみます。影の色が変わります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 0 7px green;
}

実行結果green

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 0 7px #359;
}

実行結果#359

sample

3番目の設定(7px)を3pxと15pxに変更してみます。影の広がり幅が変わります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 0 3px red;
}

実行結果3px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 0 15px red;
}

実行結果15px

sample

1番目の設定(0)を-10px、-5px、5px、15pxに変更してみます。影が左右に移動します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: -10px 0 7px red;
}

実行結果-10px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: -5px 0 7px red;
}

実行結果-5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 5px 0 7px red;
}

実行結果5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 15px 0 7px red;
}

実行結果15px

sample

2番目の設定(0)を-10px、-5px、5px、15pxに変更してみます。影が上下に移動します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 -10px 7px red;
}

実行結果-10px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 -5px 7px red;
}

実行結果-5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 5px 7px red;
}

実行結果5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 15px 7px red;
}

実行結果15px

sample

1番目の設定(0)と2番目の設定(0)を変えることで、影が斜めになります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 5px 5px 7px red;
}

実行結果5px 5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: -5px 5px 7px red;
}

実行結果-5px 5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: -5px -5px 7px red;
}

実行結果-5px -5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 5px -5px 7px red;
}

実行結果5px -5px

sample

解説

text-shadowには4つの値を指定する必要があります。

`text-shadow`の設定値
順番	内容	設定値	正の値	負の値
1	左右方向の位置	数値`px`	右に影	左に影
2	上下方向の位置	数値`px`	下に影	上に影
3	影の幅	数値`px`	幅	-
4	影の色	カラーコード	-	-

1番目の値は左右方向の影の位置です。正の値を指定すると右に影ができます。負の値を指定すると左に影ができます。

2番目の値は上下方向の影の位置です。正の値を指定すると下に影ができます。負の値を指定すると上に影ができます。

3番目の値は影の幅です。負の値は指定できません。

4番目の値は影の色です。カラーコードで指定します。

設定手順

まず0 0 5px redなどから始めると書きやすいでしょう。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 0 5px red;
}

実行結果初期状態

sample

好きな色に変えます。(第4設定値)

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 0 5px blue;
}

実行結果色を変える

sample

幅を変えます。(第3設定値)

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 0 0 15px blue;
}

実行結果幅を変える

sample

左右を変えます。(第1設定値)

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 5px 0 15px blue;
}

実行結果左右を変える

sample

上下を変えます。(第2設定値)

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 5px 8px 15px blue;
}

実行結果上下を変える

sample

影の重ね合わせ

カンマ(,)で繋(つな)ぐと、複数の影を重ね合わせることもできます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 8px 8px 7px red;
}

実行結果影は1つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 8px 8px 7px red,
                -8px 8px 7px orange;
}

実行結果影は2つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 8px 8px 7px red,
                -8px 8px 7px orange,
                -8px -8px 7px yellow;
}

実行結果影は3つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 8px 8px 7px red,
                -8px 8px 7px orange,
                -8px -8px 7px yellow,
                8px -8px 7px green;
}

実行結果影は4つ

sample

なお、重ねる順番によって表示結果が変わることに注意してください。先に設定した影が上に表示されます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: 8px 8px 7px red,
                -8px 8px 7px green;
}

実行結果redが先

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    text-shadow: -8px 8px 7px green,
                8px 8px 7px red;

}

実行結果greenが先

sample

補足

影を付けるCSSプロパティ
CSSプロパティ	対象
`text-shadow`	文字
`box-shadow`	ボックス

`text-shadow`の設定値
順番	内容	設定値	正の値	負の値
1	左右方向の位置	数値`px`	右に影	左に影
2	上下方向の位置	数値`px`	下に影	上に影
3	影の幅	数値`px`	幅	-
4	影の色	カラーコード	-	-

Emmet | tsh

Emmet
`tsh`	`text-shadow: hoff voff blur #000;`