nlog(n)

アップロードした画像に影をつけるにはいくつかの方法があるが，それぞれ一長一短がある。一番手間がかからなさそうな CSS を使った方法を導入する。

Movable Type に画像をアップロードすると，自動的にサムネイルが作られる。これはとても便利な機能なのだが，サムネイルは画像を単に縮小しただけなので，単に「画像が貼りついている」というだけで平面的。もしサムネイルに影がつけられれば，立体的になって見栄えが違う。手軽に影がつけられると嬉しい。

以下の方法は，Movable Type でなくてもよく，また，画像はサムネイルでなくてもよい。画像の影はドロップシャドウと呼ばれる。

ざっと調べてみたところ，画像そのものに手を加える方法と，画像には手を加えず CSS で影を後づけする方法の2種類がある。さらに，CSS の方法にも2種類ある。

• 画像そのものに影をつける方法
  • アップロードする画像にあらかじめ影をつけておく
    • 利点: 画像がインライン要素の中に書ける
    • 欠点1: 影をつける手間がかかる
    • 欠点2: オリジナルの画像に影をつけなければならない
    (アップロード後に自動生成されるサムネイルに影をつけるとよさそうだが，何らかのハックとプログラミングが必要)
• スタイルシートで影をつける方法
  • 1976design.com の方法(Easy CSS drop shadows | Blog | 1976design.com)
    • 利点: 左寄せ，右寄せが選択できる
    • 欠点1: ブロック要素になるため，p 要素などのインライン要素の中に書けない
    • 欠点2: 画像の幅(width)を指定しなければならない
  • A List Apart の方法(CSS Drop Shadows: A List Apart)
    • 利点: 画像の幅を指定しなくてよい
    • 欠点: ブロック要素になるため，p 要素などのインライン要素の中に書けない

以下では，1976design の改良版である A List Aprt の方法の導入と，若干の追加説明を行う。

1. 影の GIF ファイルと PNG ファイルをダウンロードする
   1. CSS Drop Shadows: A List Apart にアクセス
   2. GIF file/PNG ファイル(shadow.gif と shadowAlpha.png) をダウンロード
   3. サーバの適当なディレクトリ (例えば /images) にアップロード
2. スタイルシートに次のスタイルを追加する
   .img-shadow {
           float: left;
           background: url(/images/shadowAlpha.png) no-repeat bottom right !important;
           background: url(/images/shadow.gif) no-repeat bottom right;
           margin: 10px 0px 0px 10px !important;
           margin: 10px 0px 0px 5px;
           }
   
   .img-shadow img {
           display: block;
           position: relative;
           background-color: #fff;
           border: 1px solid #a9a9a9;
           margin: -6px 6px 6px -6px;
           padding: 4px;
           }
   margin の値は，A List Apart のオリジナルでは「0」のように単位がないが，気持ちが悪いので「0px」としている。同じことだろうか? それとも「0」とすることに何か意味がある?
3. 画像ファイルの img タグを img-shadow クラスの div 要素で囲む
   例えば，
   <p><a href="..."><img src="...jpg"></a>
   すごい画像</p>
   を
   <div class="img-shadow"><a href="..."><img src="...jpg"></a></div>
   <p>すごい画像</p>
   のようにする。注意としては，div はブロック要素のため，p 要素の中に書くことはできないということである。IE や FireFox では p の中に div が入っていても正しく表示されるが，文法的には正しくなくなってしまう。

スタイルシートでは，「!important」を使って Internet Explorer のバグを上手く回避している。

導入は以上で終了。めでたく影がつくようになるが，若干補足がある。

「文字が消える」という IE のバグの回避方法

この方法では，img-shadow という名前のブロックに float 属性を与えている。IE には float で文字の回りこみをしたときに文字が見えなくなるというバグがある(例えば HepCat Dev and Test: 文字の周り込みとIEのバグ)。これを回避するには，float 画像と文字を含んでいるクラスに width を指定することである。具体的には，Movable Type の場合 blogbody のスタイルに「width: 100%」という属性を追加すればよい(飾り窓の憂鬱。:Blogの投稿記事の文字が消えるIEの不具合について。)。

ところが，「width: 100%」を追加すると，IE の表示は正常になるが，Mozilla や FireFox では blopgbody の幅が少し長くなってしまう。これを防止するため，さらに「w\idth: auto;」を追加する。IE は「\」が入っている属性を解釈できないので「width: 100%」だけが有効となり，それ以外のモダンブラウザでは「\」があっても解釈するので，「width: auto」が優先される。

画像を右寄せしたい場合

img-shadow クラスは，画像を左寄せして表示するようになっている。これを右寄せするには，「float: left」の部分を「float: right」に変えるだけでよい。右寄せ左寄せを両方使い分けたい場合は，「img-shadow-right」のように別名にしておくと便利。

なお，「.img-shadow img」のスタイルは変更する必要はない。臨時に右寄せしたい場合は，「<div class="img-shadow" style="float: right">」のように無理やりスタイルを指定することでも可能。

文字を回り込ませたくない場合

img-shadow クラスは，デフォルトでは文字を画像に回りこませるようになっている。これを回避したい場合がある。やり方は2通りある。

• </div> の後に <br clear="all" /> を追加する。例えば，
  <div class="img-shadow"><a href="..."><img src="...jpg"></a></div>
  <br clear="all" />
  <p>すごい画像</p>
• スタイルシートの br のスタイルに「clear: both」属性を追加する。例えば
  .blogbody br { clear: both; }
  としておき，本文は <br /> だけを挿入する。
  <div class="img-shadow"><a href="..."><img src="...jpg"></a></div>
  <br />
  <p>すごい画像</p>

場合によって回り込みをさせたりさせなかったりしたい場合は前者を，一律に回り込みをさせたくない場合は後者が便利だろう。もちろん，br 要素を使う代わりに，空のブロック要素(何でもよい)を挿入することでも可能である。フロート解除のビューティフルな方法が ready for the blue: フロートした要素を閉じるには で紹介されているが，文字の回り込み解除には残念ながら使えなかった。

不思議な現象

上記のように影をつけると，なぜか IE と Mozilla (または FireFox) では表示が違ってしまう。IE では画像に枠線がつかないのである。しかし，同じページを Mozilla で保存して，保存したファイルを IE で見ると枠線が表示されるのである。謎である。A List Apart の例では，IE でも Mozilla でも同じように表示されている。原因が分からない。

2005年5月30日追記: コメントをいただいて，上記の不思議な現象の原因が分かりました。<?xml version="1.0" encoding="EUC-JP"?> をHTML文書の最初で宣言しなければ，IE でも画像に枠線がつきます (connect: CSSで写真の周りに枠を表示・・・)。しかし，宣言しないのは推奨されていません。xml 宣言を DOCTYPE 宣言の後に行うという方法もありますが，推奨されません。文書は xml 宣言で始めることが推奨されています (XHTMLの書き方と留意点)。IE での枠線の表示は諦めることにしました。

2008年2月3日追記: xml 宣言については，小粋空間: 標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する さんで詳しく解説されています。

• Tweet