CSS text-shadowの宣言を生成する方法

水平方向・垂直方向のオフセット、ぼかし、色を入力すると、text-shadow のCSS宣言を生成できます。数値を省略した場合は既定値が使われ、値には px が付いて出力されます。

CSS text-shadowの宣言を作る準備

CSSの text-shadow は、文字に影を付けるための宣言です。水平方向と垂直方向のずれ、ぼかし量、色を指定すると、対象の要素に合わせた宣言を作成できます。毎回単位や記号を手入力する代わりに、必要な値を整理して出力したい場面で利用できます。入力できるのは、水平方向のオフセット、垂直方向のオフセット、ぼかしの数値と、色の文字列です。

入力してCSS宣言を生成する手順

1. 水平方向のオフセットを入力します。影を右へずらす場合は正の数を使い、左へずらす場合は負の数を使う形で指定します。垂直方向のオフセットも同じように入力します。
2. ぼかしの数値を入力し、色を文字列で指定します。3つの数値には px が付いた形で出力されます。
3. 入力内容を確認して生成を実行します。数値を省略した場合は、水平方向が1、垂直方向が1、ぼかしが2として扱われ、色を省略した場合は #00000033 が使われます。
4. 表示された text-shadow の宣言を確認し、対象のCSS設定で利用します。水平方向、垂直方向、ぼかしのすべてに0を入力した場合も、生成は成功します。

生成結果の読み方

結果は、4つの入力要素を反映した text-shadow のCSS宣言です。水平方向の値、垂直方向の値、ぼかしの値には px が付き、宣言の末尾にはセミコロンが付きます。たとえば、影を右へ2px、下へ3pxずらし、ぼかしを4px、色を #333333 として指定した場合は、text-shadow: 2px 3px 4px #333333; という形になります。

数値を空欄にした結果が想定と異なるときは、入力が無効になったのではなく、確認済みの既定値が使われた可能性があります。影をぼかさず、オフセットも付けない設定では、3つの数値に0を指定できます。色は文字列として扱われるため、出力では入力した色の表記を確認してください。

使用例

見出しを右下へ少しずらした影で表示したい場合に、4つの値を指定して宣言を生成します。

文字の影を右へ2px、下へ3pxずらし、ぼかしを4px、色を #333333 として入力して生成します。

text-shadow: 2px 3px 4px #333333; のように、水平方向・垂直方向・ぼかしにpxが付き、末尾にセミコロンがある宣言になります。

制限事項

• 用途はCSSのtext-shadow宣言の生成です。ほかのCSSプロパティの宣言を作成する機能までは、この使い方には含まれません。

よくある間違い

• 数値や色を省略したため、意図した値ではなく既定値が出力されることがあります。空欄を使う場合は既定値を確認し、特定の見た目にしたい場合は4つの入力を明示してください。

よくある質問

生成結果にはpxとセミコロンが付きますか？

はい。水平方向、垂直方向、ぼかしの値には px が付いた形で出力され、宣言の末尾にはセミコロンが付きます。

入力を省略するとどうなりますか？

数値を省略した場合は、水平方向1、垂直方向1、ぼかし2が使われます。色を省略した場合は #00000033 が使われます。

オフセットとぼかしに0を指定できますか？

はい。水平方向、垂直方向、ぼかしの値に0を指定した場合も、成功する生成結果になります。