CSSでドロップシャドウ

続・画像をポストカード風に

先日エントリした「画像をポストカード風に」。これは画像(主に写真)自体を加工編集して縁取り+シャドウを付ける方法。

それに対し、2年前にもちょっと挑戦していたのだけれど、画像自体はそのままでスタイルシートによってシャドウを付ける方法があるのを別に発見。これなら個別に画像編集する手間も省ける。

せっかく前者の方法を自分なりに編み出したのに、CSSでほぼ同等にできるのは、手作業の職人技が機械に取って代わられるようで複雑な心境。まあでも、このところブログの総見直しの過程で画像編集も勉強させられて非常にいい機会になっている。

次のサイトに従ってCSSを指定すれば一発。

:: CSS Drop Shadow Tests :: By Phil Baines ::

もう一手間かけて

但し! 僕の場合はさらに手間取った点があって、画像には必ずキャプション(簡単な説明)を下に付けてやりたい。

先の方法は、画像を囲むブロックと、その中のimg属性のそれぞれにスタイル設定をしているのだけれど、単純にブロック内にキャプションを突っ込むと、キャプション部分のブロックも含めて縁取られ+シャドウが付いてしまうことになるからダメ。

ならば、画像とキャプション部分を個別に括ったのを、さらにもう一括りdiv要素でくくってfloatさせねばいけない。実は昨日のエントリでそれでうまくいった! つもりなのだけれど、例によりFirefoxではOKでもIEではアウト。

これは使えない・・・と諦めたけれど、最近は粘り強くなったもので、この野郎!と思いつつ、IEバグ対策をあれこれ模索。かなり苦労させられながら、あれこれ試行錯誤して一通り解決(のはず)。以下のあたりが影響していそう。

(いずれもInternet Explorer (Windows) CSSバグリストサイトから)


マージン(margin)、ボックス(float)、width、clear を使うときは相互の組み合わせに要注意してバグ回避策を忘れずに! ということ。

IEバグの具体例

回避後のつもりでもIE7でなおバグ

試しに同じファイルをFirefoxとIE(InternetExplorer6)の2つのブラウザで別々に見てみる。同じ文章、同じ画像、同じHTML+CSSでも見え方が異なる例。

Firefox他、通常のブラウザならCSSを正しく解釈して、画像が右側にきちんと寄せられて表示され、文章が回り込む。かつ、キャプション部分も正しく表示される。

ところが、IE(InternetExplorer6)ではCSSを解釈しきれずに、表示が崩れてしまう。

  • png画像(影の部分の透明を持ったもの)を表示できない
  • margin(ボックスとの間隔)が違う
  • width(横幅)を正しく反映せず右側を押し伸ばして(突き破って)しまう

キャプチャー画像で示すと以下の通り。

Firefoxでの見え方


IE6での見え方

ところで、これまた手っ取り早い解決法はテーブル(table)で囲んで行単位にセパレートしてやれば簡単。ちなみに以前は朝日新聞(asahi.com)等の大手サイトでもそういう方法を採っていた。画像の箇所だけぽんとテーブルで置いてやる方法。

でも、これはweb屋、というほど仕事でやっているわけではない、趣味で作っている僕でさえも「そりゃないだろう」という眉唾のまがい方法。

試しに調べてみたら、今はもう朝日や読売のサイトでも止めて、きちんとした造りになっているよう。でもまだヤフーではテーブルで置いていた。


 

  Related Entries


Message

メールアドレスが公開されることはありません。