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

エ・ビスコム・テック・ラボ
2008/06/27 08:00

今回はスタイルシートを利用した文字のアウトラインの表示を解説する。

　Safariのバージョン3では、スタイルシートを利用して文字のアウトラインを表示できるようになった。スタイルシートで文字をアウトライン化すれば、画像を使わずに文字のデザインの幅を広げることができる。「Safari 3.1でWebフォントを利用する」で紹介したWebフォントが普及すれば、文字のデザインに画像を使う必要は少なくなっていくだろう。

アウトラインのデザインを指定する

　文字のアウトラインのデザインは、以下のような-webkit-text-stroke〜というプロパティで指定する。現在のところ、指定できるのはアウトラインの色と太さだ。

アウトラインのデザインを指定するプロパティ
プロパティ機能
-webkit-text-stroke-colorアウトラインの色を指定する
-webkit-text-stroke-widthアウトラインの太さを指定する
-webkit-text-strikeアウトラインの色と太さをまとめて指定する

　次のサンプルでは、colorプロパティで文字の色を水色に、-webkit-text-stroke-colorプロパティでアウトラインの色を青色に、-webkit-text-stroke-widthプロパティでアウトラインの太さを3ピクセルに設定している。

Safari 3での表示 Safari 3での表示 
div	{
	font-size: 64px;
	font-weight: bold;
	color: skyblue;
	-webkit-text-stroke-color: darkblue;
	-webkit-text-stroke-width: 3px;
	}

<div>こんにちは</div>
※ブラウザで表示を確認する

　また、-webkit-text-strokeプロパティを利用すれば、アウトラインの色と太さをまとめて指定することができる。

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

塗りの色を指定する

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

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

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