文字のアウトラインを表示する--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での表示
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での表示
div {
font-size: 64px;
font-weight: bold;
color: skyblue;
-webkit-text-stroke: 3px darkblue;
}
※ブラウザで表示を確認する
塗りの色を指定する
- 特集: FirefoxとSafariのCSS徹底検証 (40件)
米フォレスター・リサーチ社 シニアアナリスト Jeremiah K.Owyang氏を迎え、同氏が提唱するソーシャルテクノロジーを効果的に活用方法するための方法『POST』を日本で初めて紹介する注目のリアルイベント
- 今日のトップ記事
- 昨日
- 2日前
- 5日前
- 6日前
- 7日前
- ホワイトペーパー
- 話題のタグ
レビュー
Java
iPhone
脆弱性
開発環境
iPhone 3G
オープンソース
小技
Mozilla
入門
UI
Flash
Database
Firefox 3
Apple
Internet Explorer
リファレンス
モバイル
server
Python
Firefox
Linux
ソフトウェア開発
プロジェクト管理
Ajax
Webアプリケーション開発
CSS
携帯電話機
仮想化ソフトウェア
RIA
iPod touch
Off Topic
Safari
SOA
仮想化
Adobe
デザイン
ユーザーインタフェース
Windows
Mac OS X
データベース
Tips
HTML
Webデザイン
JavaScript
ブラウザ
プログラミング言語
Webサービス
Google
PHP
話題のタグを見る »
ソーシャルテクノロジーをビジネスに利用する
Mozilla Labs、Firefoxで地理情報を認識活用できるプラグイン「Geode」を正式発表
DelphiのパフォーマンスをDelphiで改善:エンバカデロの製品戦略
社内政治を生き抜くための教訓10箇条
iPhoneでVoIP--Fringを早速試す
Firefox 3のブックマーク構造を理解しよう
ラウンドアップ:「優れたUI」を実現するためのアプローチ
MSのバルマー氏、「Windows Cloud」の発表を示唆
エンタメCGM「gooメーカー☆メーカー」
Techno Exchange
ZDNet Japan Green IT
KDDI「SaaSソリューション」
これからの時代のセキュリティ対策
グリーンITの第一歩は見える化です