チェックフィールド株式会社

東京 港区 千代田区 中央区 ITの運用管理やコンサルティング・相談・サポートはITコンシェルジュにお任せください

スタッフぶろぐ

このエントリをはてなブックマークに登録

F初心者にやさしいHTML講座:テキストに影をつける

今回はテキストに影をつけるスタイルをご紹介します。
text-shadowプロパティを使います。
※こちらのスタイルは最新のブラウザを利用していないと表示できない場合があります。

影が分かりやすいように、背景色をつけた例をご覧ください。

<span style="text-shadow: 5px 5px 2px red;">テキストに影がついてます</span>

出力結果

テキストに影がついてます

影は本体からの水平方向の距離、垂直方向の距離、影のぼかし半径、影の色を指定することができます。
上記の設定ですと、

水平方向の距離 5px
垂直方向の距離 5px
影のぼかし半径 2px
影の色 red

となります。

水平方向と垂直方向の値を変えてみます。

<span style="text-shadow: 10px 5px 0 red;">テキストに影がついてます</span>

出力結果

テキストに影がついてます

影のぼかし半径を0にすると、くっきりした影になりますね。

影の値をマイナスにすると、影が反対方向につきます。

<span style="text-shadow: -5px -5px 4px red;">テキストに影がついてます</span>

出力結果

テキストに影がついてます

使いすぎると見づらい印象を与えてしまうので、見出しや重要な箇所のみに使うとよいでしょう。

▼関連するタグや属性はこちらを参考にしてください。
http://www.htmq.com/css3/text-shadow.shtml