文字のアウトラインを表示する--FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008-06-27 08:00:00
  • このエントリーをはてなブックマークに追加

アウトラインを表示したときの下線の色

 text-decorationプロパティを「underline」と指定すると、文字に下線を表示することができる。このとき、下線は文字の塗り色で表示される。たとえば、次のように文字の塗り色をピンクに設定して下線を表示すると、下線もピンク色で表示されることがわかる。

Safari 3での表示 Safari 3での表示
div{
font-size: 64px;
font-weight: bold;
color: pink;
text-decoration: underline;
}
ブラウザで表示を確認する

 これに対して、-webkit-text-strokeで赤色のアウトラインを表示すると、下線も赤色で表示される。

Safari 3での表示 Safari 3での表示
div{
font-size: 64px;
font-weight: bold;
color: pink;
text-decoration: underline;
-webkit-text-stroke: 3px red;
}
ブラウザで表示を確認する

 今回紹介した文字のアウトライン関連のプロパティは、現状ではCSS 3の規格には取り込まれておらず、W3Cに対して提案されている段階のものだ。Safari 3しか対応していないので実際に活用できるのは先のことになるだろうが、標準化や今後の動向などは本連載の中で随時報告していきたい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]