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

エ・ビスコム・テック・ラボ
2008/06/27 08: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しか対応していないので実際に活用できるのは先のことになるだろうが、標準化や今後の動向などは本連載の中で随時報告していきたい。

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
HTML PHP Tips 小技 脆弱性 Mozilla Firefox Windows XP 仮想化 OS Windows Vista セキュリティ Opera Mac OS X モバイル Java マイクロソフト CSS iPhone 3G iPod touch Linux UI JavaScript Firefox 3 Google Off Topic ブラウザ アプリケーション Ajax Database オープンソース ソフトウェア開発 プログラミング言語 Windows 7 リファレンス インストール Windows Safari Internet Explorer Microsoft Flash iPhone Webサービス RIA 開発環境 WebKit データベース Webデザイン Chrome Apple
  • 話題のタグを見る »