HTML STUDY
>
>

文字に影をつける

ここではCSSで文字に影をつける解説をしていきます。影を横方向、縦方向に移動することができ、影のぼかし具合や、色も設定することができます。

text-shadow

ではCSSプロパティtext-shadowを使用して文字に影をつけてみましょう。入力する値の順番は（影の横移動）（影の縦移動）（ぼかし具合）（影の色）となり、半角スペースを入れて入力します。ぼかし具合と影の色については設定する必要がなければ省略できます。また影の横と縦移動の値に負の値を入力すると反対方向に影を表示することができます。

例 text-shadow: 横px 縦px ぼかしpx 色;
要素解説
<p>ひと段落
<span>テキスト範囲で他と区別する
CSSプロパティ解説
text-shadow文字に影をつける

HTMLコード記述例

<p>サンプル１ <span class="shadow1">あいうえお</span></p>
<p>サンプル２ <span class="shadow2">あいうえお</span></p>
<p>サンプル３ <span class="shadow3">あいうえお</span></p>

外部ファイルCSS記述例

@charset "utf-8";

span.shadow1 {
 text-shadow: 5px 0px 0px #ff00ff;
 font-size: 24px;
}

span.shadow2 {
 text-shadow: 0px 5px 0px #ff00ff;
 font-size: 24px;
}

span.shadow3 {
 text-shadow: 5px 5px 3px #ff00ff;
 font-size: 24px;
}

ブラウザ表示例

サンプル１ あいうえお

サンプル２ あいうえお

サンプル３ あいうえお

CSS文字 関連記事