ウェブのあれこれ
ウェブを活用したいひとのためのブログ
【CSS Tips】テキストシャドーの使い方
2015/04/08 HTML/CSS

【CSS Tips】テキストシャドーの使い方

text-shadowプロパティはほとんどのモダンブラウザに対応していて、うまく使うことで より様々な文字装飾を行えます。

テキストの装飾は取り消し線やアンダーラインだけじゃない

text-shadowプロパティはほとんどのモダンブラウザに対応していて、うまく使うことでより様々な文字装飾を行えます。
CSSでの基本的な記述は以下の通り。
.shadow {
text-shadow:[水平方向の距離] [垂直方向の距離] [影のぼかし半径] [影の色];
}
Sample Text サンプルテキスト
「なーんだ、影付けるだけか」そう思ったあなた。実は違います。
text-shadowによるテキスト装飾の表現方法は様々なんです!

プロパティを重ねがけできる!

「text-shadow」実は、カンマ区切りでプロパティを重ね掛けすることができるんです!

.shadow {
text-shadow:[水平方向の距離] [垂直方向の距離] [影のぼかし半径] [影の色],[水平方向の距離] [垂直方向の距離] [影のぼかし半径] [影の色],・・・
}

簡単に言うと、Sample Text サンプルテキスト こんなことなんですが・・・

重ねがけすることで以下のようなテキスト装飾もCSSのみで実現できるんです!

Sample Text サンプルテキスト
Sample Text サンプルテキスト

Sample Text サンプルテキスト
Sample Text サンプルテキスト

これはあくまでも一例で、中にはtext-shadowジェネレータ何てものもあって、文字装飾のCSSを簡単に作れるサービスなんかもあります。

CSSでテキスト装飾することでSEO効果もアップ

SEOはコンテンツ内のテキストを認識してランク付けされますよね。ちょっとしたテキスト装飾なら、画像に埋め込むよりもCSSで装飾した方がSEO効果も期待ができますね。

このTipsでは少ししかサンプルを掲載していませんが、工夫次第で様々な装飾が実現できます!
ぜひ試してみてください。

Provided by Revolme inc.
revolme.co.jp