IEでもキレイ!ブラウザ上でアウトライン(縁取り)を表現する方法

IEでもキレイ!ブラウザ上でアウトライン(縁取り)を表現する方法

はやち

はやち

どうもですはやちです(ノ)◜ω◝(ヾ)
『龍が如く維新』にハマっている間に『戦国無双4』が発売され、ちょいと詰み気味になっております。
はやちが特に注目している『戦国無双4』の新キャラは「松永久秀」です。

 

そんなのはどうでもいいですねc⌒っ´ʘ‿ʘ`)っ

 

今回は縁取りされたテキストをどのブラウザでも、とくにIEでもキレイに表示させる方法をご紹介いたします。

HTML

<p class="outline">LIFE IS GOOD</p>

HTMLはこちらを使っていきたいと思います( ˘ω˘)☝

CSS

以下、CSSを使った方法を3つ紹介いたします( ˘ω˘)☝

1. テキストストロークを使う方法

-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;

比較画像

img

テキストストロークでの方法はキレイに表示されるものの、webkitしか対応していないため他のブラウザでは白い文字になってしまいます( ˘ω˘)☝

2. テキストシャドウ使う方法

text-shadow: black 1px 1px 0px, black -1px 1px 0px,
black 1px -1px 0px, black -1px -1px 0px;

比較画像

img2

テキストシャドウでの表現でもなんとか様になりました!( ˘ω˘)☝

img3

が、IE9とIE8にはテキストシャドウが効かないため、あともう少しです(;˘ω˘)

3. IE独自の方法+テキストストローク+ボックスシャドウ

filter:dropshadow(color=#000000,offX= 0,offY=-1)
dropshadow(color=#000000,offX= 1,offY= 0)
dropshadow(color=#000000,offX= 0,offY= 1)
dropshadow(color=#000000,offX=-1,offY= 0);

-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;

text-shadow: black 1px 1px 0px, black -1px 1px 0px,
black 1px -1px 0px, black -1px -1px 0px;

IE独自の要素filterを使用しての表現では、IEのブラウザでもキレイに表示できます。

これだけですとモダンブラウザには反応されないため、さらに通常で対応できたテキストロークテキストシャドウを足してあげます( ˘ω˘)☝

比較画像

img4

モダンブラウザは問題無いですね( ˘ω˘)☝

img5

IEの方も不格好ではありますがしっかり反映されております( ˘ω˘)☝

 

実際ご確認できるようデモをご用意しました( ˘ω˘)☞ Demo

まとめ

いかがでしょうか、テキストストロークでアウトラインが表現できたとはいえ、他のブラウザではなかなか対応ができず苦戦しました。

これで次回デザインする際にも悩まずにすみますね。この記事をご覧になった方の悩みも解消できたらなと思います( ˘ω˘)

LIGではエンジニアを募集しています!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む