株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
今日は、CSS3における「text-shadow」のお話。
まず、この「text-shadow」、何ができるかというと英語表記のまんま、「文字に影」と付けます。
つまりは、いままでPhotoShopやFireworksなどの画像加工ソフトで、文字にかけていたドロップシャドウ（文字に影をつける）を、CSSでコントロールできるというもの。
ちょっとした修正なのに、わざわざソフトを立ちあげて、画像保存してなんていう面倒くさいことに煩わされず、ちょっとテキストエディタをいじるだけで修正できるので、とても便利です。
とは言え、そこはCSSの話。
対応ブラウザが、モダンブラウザだと言われている、Chrome, Safari, Firefox, Operaでは問題なく利用できるのですが、2013年１月の時点で約55%ほどだと言われているIEには、まったく効き目がありません！！
しかも、微増ながらシェアがあがっているのだとか・・・
世界では、CROMEがIEのシェアを抜いて１位となっているというのに・・・。
それでは実際に「text-shadow」で何ができるのかを見てみましょう。
今回やるべきことは、3pxの中間色のグレー（#999）の影を落としてみる。
サンプルテキストに日本語を使うとかっこ良くできないのだよ
これには、以下のようなtext-shadowのスタイルを入れています。
text-shadow: 3px 3px 3px #999;
書き方の意味はというと・・・
text-shadow: 右方向 下方向 ぼかしの距離 色;
ちなみに、右方向と下方向にマイナスを入れると、それぞれ逆の方向、つまり左方向、上方向にシャドウをいれることになり、さきほどのソースをマイナスにしてみると
ハイ、これわかりづらいですよね？
こんなときはどうするかというと、text-shadowでは、ぼかしの距離を省略することができるので、その部分を省略し、ぼかさずシャープに影をつけてみましょう。
text-shadow: 3px 3px #999;
どうですか、ぼかしていないのに、この見づらさ・・・。
但し、どのように移動しているのかはわかりますよね？
text-shadow: 1px 1px #999;
だんだん僕のセンスが疑われはじめてきたのではないでしょうか・・・
こうなったら、思い切って、10pxほど、移動させてやりましょう。
text-shadow: 10px 10px #999;
やればやるほど、ダメになるという典型ですね。
「一番最初に作ったもののほうが良かった」というwebに有りがちな失敗例です。
しかし、この惨憺たる結果を見てきたときに、text-shadowって使い場所がなくね？なんておもいませんか？
いままでの例を見る限り、ないほうがマシじゃん！なんて・・・
でも、このtext-shadowは、太字や大きな文字と合わせると、それはそれは見栄え良くなるんですよ！
ただ、ただ、僕の使い方が下手くそだっただけで、もっと上手に使えるスタイルなのです。
ですので、みなさんは、色々と試してみてカッコイイtext-shadowの使い方を模索してみて下さい。
IE対応については、また別の機会に・・・
ツイート
WEBの技術の進化はとても早くて、ほんの4～5年前には、ガラケーのHPデザイン表現が広がるということで、必死になってxhtmlと携帯で使えるCSSを覚えたかと思えば、いまやそんな技術は必要とされていません。
当時、これからxhtmlが主流となって発展していくのだろうなと思い（書き方としてもxhtmlは厳格だったので）何も見ずに手入力でサイトを3キャリア対応のサイトを制作できるようになったというのに、今度はとても簡素なHTML5がxhtmlにとって変わる始末・・・。
おまけに、表現力がグンとアップしたCSS3は、かなりプログラム寄りになっており、すべてを習得するには覚えることがたくさん・・・。
しかも、しっかりとした仕様もイマイチ確定しておらず、標準の書き方だけでは十分に表現を活かすことができず、ベンダープレフィックスなる、各ブラウザごとに表現できるような書き方も身につけなければなりません。
おまけに、当然といえば当然なのですが、相変わらずIEは、制作者の苦労を2倍にも3倍にもアップさせてくれるし、WEBの進化はweb製作者にとっての罰ゲームのようなものです。
とはいえ、それを怠ってしまっては、明日のご飯にさえ、ありつけなくなる始末。
そんなわけで、進化しているWEB技術を習得するためと、自分の力を再確認するためにブログを立ち上げました。
忘備録も兼ねているため、いまさら？みたいな記事を書いてしまうかも知れませんが、よろしければお付き合いください。
ツイート
