CSS3入門道場

テキスト

この章では、テキストに対する影の装飾やテキストが溢れる場合などに対処するCSSを見て行きます。

メニュー

参考リンク

ブラウザサポート

本章で紹介するCSSのサポート状況は、以下になります。

text-shadow IE9を除きどのブラウザでもサポートOK
text-overflow どのブラウザでもサポートOK
overflow-wrap(word-wrap) 以前の形式のword-wrapであれば、どのブラウザでもサポートしていますが、
overflow-wrapは、IE、Firefoxでは非対応
resize IE、iOS Safari、Android Browser以外のブラウザでサポートOK

text-shadow

text-shadowプロパティを使って、テキスト(文字)に対して、影を付けることができます。まずは、サンプルで見てみましょう。

前章のbox-shadowでも影は扱いましたので、分かり易いことでしょう。#shadow1では、影を右に3px、下に6pxずらした箇所に、grayの色で配置しています。1つ目の引数で横方向(プラスで右方向、マイナスで左方向)、2つ目の引数で縦方向(プラスで下、マイナスで上方向)です。続く色は本来必須ではありませんが、ブラウザ依存の所があるため、必ずセットするようにしましょう。 2つ目のサンプルの#shadow2では、3つ目の引数で影のぼかし具合(5px)を指定しました。

影の長さを0, 0にして影のぼかしを少し加えると、白抜きのイメージも演出できます。また、半角カンマで区切り、影を複数指定することも可能です。

Copyright 2015 CSS3入門道場 All Rights Reserved.