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

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

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

Safari 3での表示

div	{
	font-size: 64px;
	font-weight: bold;
	color: pink;
	text-decoration: underline;
	}

※ブラウザで表示を確認する

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

Safari 3での表示

div	{
	font-size: 64px;
	font-weight: bold;
	color: pink;
	text-decoration: underline;
	-webkit-text-stroke: 3px red;
	}

※ブラウザで表示を確認する

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