
文字のアウトラインを表示する--FirefoxとSafariのCSS対応
塗りの色を指定する
文字の塗りの色はcolorプロパティで指定するが、Safari 3では-webkit-text-fill-colorというプロパティも利用できるようになっている。colorと-webkit-text-fill-colorの両方のプロパティを指定した場合、-webkit-text-fill-colorの指定が優先される。
プロパティ | 機能 |
---|---|
color | 文字の塗りの色を指定する |
-webkit-text-fill-color | 文字の塗りの色を指定する |
たとえば、次のサンプルではcolorプロパティを水色、-webkit-text-fill-colorプロパティを黄色に設定している。すると、文字の塗りの色はSafariでは黄色で、-webkit-text-fill-colorに対応していない他のブラウザでは水色で表示される。


div{ font-size: 64px; font-weight: bold; color: skyblue; -webkit-text-stroke: 3px darkblue; -webkit-text-fill-color: yellow; }
※ブラウザで表示を確認する
-webkit-text-fill-colorプロパティは、文字の塗り色を透明にしてアウトラインを表示したいときに活用できる。colorプロパティの値を「transparent」と指定すれば塗り色は透明になるが、アウトラインを表示できなければ透明になった文字を読むことはできない。そこで、colorプロパティではアウトラインに対応していないブラウザ用の塗り色を指定して、-webkit-text-fill-colorプロパティで透明色を指定する。
次のサンプルでは背景画像を表示して、-webkit-text-strokeでアウトラインを白色に、-webkit-text-fill-colorで塗り色を透明色に設定した。また、colorプロパティでは文字の色を白色に設定している。これで、Safariでは文字を透明色で、他のブラウザでは白色で表示することができる。


div{ font-size: 64px; font-weight: bold; color: white; -webkit-text-stroke: 1px white; -webkit-text-fill-color: transparent; }
※ブラウザで表示を確認する
なお、現状で「color: transparent」と指定して文字の塗り色が透明になるのは、SafariとFirefoxだ。OperaとInternet Explorerでは透明にはならず、黒色で表示される。
アウトラインを表示したときの下線の色
- 新着記事
- 特集
- ブログ
- 企画特集
-
次の一手はこれだ!
-
保育業界のDX(前編)
-
セキュリティの今を知る
-
IDaaSって何?
-
連載!プロが語るストレージ戦略
-
請求書がきてからでは遅い
-
いまさら聞けない「PPAP」
-
いまあるデータで身近な業務をDX
-
企業DXのキモはクラウドにあり
-
保育業界のDX(後編)
-
話題のセキュリティ事故体験ゲーム
-
講演の見どころを紹介
-
データの散在と非常率運用がネック
-
いままさに社会にとっての転換点
-
連載!プロが語るストレージ戦略
-
ビッグデータ最前線!
-
特集:IT最適化への道
-
モバイルデバイスもターゲットに!
-
さあ、クラウドで解決しよう。
-
ゼロトラストに不可欠なID管理
-
デジタルを当たり前と言えるか?
-
利便性とセキュリティの両立
-
明日からではもう遅い?!
-
内部不正や不注意をどう防ぐ?
-
連載!プロが語るストレージ戦略