文字のアウトラインを表示する--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にログインしてコメントする

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