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

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