ywork2020.com

Title

テキストに影をつける

目次 (INDEX)

text-shadowとは

text-shadow とは次の語句からなるCSSのプロパティです。
text
読み: テキスト
意味: 文字情報、本文、原文
shadow
読み: シャドウ
意味: 影

目次に戻る

text-shadowプロパティの概要

このプロパティは、テキストに影を付けることができます。

影の設定を,(カンマ)で区切ることで指定した数だけ影を付けることができます。 複数指定した影が重なる場合は、最初に指定した影が一番上になり、以降は指定した順番に表示され、最後に指定した影が一番下に表示されます。

指定できる値は、影の色、影の位置、影のばかしの範囲です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

  • color: 影の色
  • offset-x: 水平方向のずらし値
  • offset-y: 垂直方向のずらし値
  • blur-radius: ぼかしの半径

色の指定は前後どちらに記述しても結果は変わりません。

セレクター{text-shadow: offset-x offset-y;}

セレクター{text-shadow: color offset-x offset-y;}

セレクター{text-shadow: color offset-x offset-y blur-radius;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

初期値: none

初期値のnoneは影が付かない状態になります。

text shadow

セレクター{text-shadow: none;}

目次に戻る

数値: 影の位置の指定する

テキストに影を付けるということは、単純にいうとテキストの複写を元のテキストの下に描画して、 それをどれだけの水平位置と垂直位置に、「ずらす」かということになります。

設定値には単位を付けて記述します。 また、設定値を複数指定する場合は、半角スペースで値を区切る必要があります。

一つ目の値には水平方向へずらしたい幅を数値と単位で指定します。 正の値を指定すると右方向へ、負の値にすると左方向に影が移動します。

二つ目の値には垂直方向へずらしたい幅を数値と単位で指定します。 正の値を指定すると下方向へ、負の値にすると上方向に影が移動します。

このサンプルでは影を右方向へ3px、下方向へ3pxの位置に指定しています。

text shadow

セレクター{text-shadow: 3px 3px;}

サンプルをご覧になって、どう見えたでしょうか。結果はブラウザによって異なるので一概にはいえませんが、 多くの方は、テキストが視認しにくい状態になったのではないでしょうか。

これは影の色を指定していないために元のテキストと影の文字色が同じになっている現象です。 次のセクションでは、影の色を指定して影らしく表示してみようと思います。

目次に戻る

色値+数値: 影の色と位置の指定する

前のセクションでは、文字色と影色が同じ色で表示されていました。 これでは、影に見えないと思いますので、 このサンプルでは影の色を指定して影らしく表現してみようと思います。

text shadow

セレクター{text-shadow: black 3px 3px;}

結果は影らしく見えたでしょうか。 影の色を指定する場合は、カラーキーワード、カラーコード、rgb関数、rgba関数などで色を指定できます。 また、色の指定はコードの最後の部分に記述しても、他の設定値と識別ができますので、コードとしては成立します。 次のサンプルでは色を最後に指定して見てみましょう。


次のサンプルの影は数値をマイナスの値にした結果です。

text shadow

セレクター{text-shadow: -3px -3px rgb(100,100,50);}

目次に戻る

応用: 複数の影を指定する

複数の影を指定したい場合には、影の設定毎にカンマで区切ることで、複数の影を追加できます。

text shadow

セレクター{
	text-shadow: red 2px 2px, black 4px 4px;
}

目次に戻る

ブラー値: 影のぼかしを指定する

影には、ぼかしを設定することができます。 このサンプルでは前のセクションで使ったものにぼかしを設定しています。

ぼかしを設定する場合は、数値に三つ目の値が必要です。 この値を大きく設定すれるほど、ぼかしは大きくなり、影は広がり薄く表示されます。

text shadow

セレクター{
	text-shadow: red 2px 2px 6px, black 4px 4px 6px;
}


もう一つ、ぼかしのサンプルを紹介しておきます。 次は、ぼかしを大きくしてみます。このような使い方は影には見えませんが、デザインとしては十分な結果が得られます。

text shadow

セレクター{
	text-shadow: red -10px -10px 30px, blue 10px 10px 30px;
}

目次に戻る

グローバル値

text-shadowプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のnoneに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。
セレクター{text-shadow: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

text-shadow: none;

text-shadow: red 1px 1px;

text-shadow: red 0px 0px 10px;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る