文字のアウトラインを表示する--FirefoxとSafariのCSS対応
エ・ビスコム・テック・ラボ
2008/06/27 08:00
今回はスタイルシートを利用した文字のアウトラインの表示を解説する。
アウトラインを表示したときの下線の色
text-decorationプロパティを「underline」と指定すると、文字に下線を表示することができる。このとき、下線は文字の塗り色で表示される。たとえば、次のように文字の塗り色をピンクに設定して下線を表示すると、下線もピンク色で表示されることがわかる。
Safari 3での表示
div {
font-size: 64px;
font-weight: bold;
color: pink;
text-decoration: underline;
}
※ブラウザで表示を確認する
これに対して、-webkit-text-strokeで赤色のアウトラインを表示すると、下線も赤色で表示される。
Safari 3での表示
div {
font-size: 64px;
font-weight: bold;
color: pink;
text-decoration: underline;
-webkit-text-stroke: 3px red;
}
※ブラウザで表示を確認する
今回紹介した文字のアウトライン関連のプロパティは、現状ではCSS 3の規格には取り込まれておらず、W3Cに対して提案されている段階のものだ。Safari 3しか対応していないので実際に活用できるのは先のことになるだろうが、標準化や今後の動向などは本連載の中で随時報告していきたい。
- 特集: FirefoxとSafariのCSS徹底検証 (33件)
- 今日のトップ記事
- 昨日
- 2日前
- 3日前
- 6日前
- 7日前
- ホワイトペーパー
- 話題のタグ
ブラウザ
脆弱性
Linux
Adobe
Apple
仮想化
入門
Google
モバイル
Webアプリケーション開発
iPhone
iPhone 3G
CSS
Database
Firefox 3
XML
Apache
JavaScript
Java
SOA
仮想化ソフトウェア
Firefox
リファレンス
Webサービス
server
Internet Explorer
Flash
Off Topic
Leopard
Windows
プロジェクト管理
RIA
Python
開発環境
携帯電話機
オープンソース
Safari
Ruby
PHP
Mac OS X
小技
Ajax
プログラミング言語
ソフトウェア開発
HTML
データベース
Mozilla
Tips
Webデザイン
iPod touch
話題のタグを見る »
このアクセサリはiPhoneでは動作しません
iPhoneでコピー&ペーストを実現するオープンソースソリューションが登場
mixiサービス企画部長に聞く、「プラットフォームを開放する理由」
iPhone 3Gはメールにファイルを添付できないの?
発射台での度胸試し--J・L・ガセー氏が見た「MobileMe」の問題点
Firefox 3.1で強化されるHTML 5対応--Canvas Text APIを検証
つなげ! 速く、美しく、正確に--光ケーブル工事の技能を競う全国大会が開催
あなたのパワポ資料が近未来的に:MSがプラグイン公開
無料の「Oracle Database XE」で高速バッチ処理:活用のポイント
Rubyでどう書く?:RubyCocoa+Core Animationでお手軽アニメーション
APC SOLUTIONS FORUM 2008をレポート
Techno Exchange
仮想化環境で求められるストレージの要件
Webセキュリティ特集
セキュリティ対策レベルテスト公開!
DELLが掲げる「新・仮想化アセスメントサービス」
ZDNet Japan ホスティング特集
ZDNet Japan Green IT