レイヤーとフラッシュを重ねるとフラッシュが上にくる場合の対処法


普段、フラッシュをページに挿入していると、メニューバーの上にモバイル制作広告の画像バナーを置きたいのですが、x-indexでflashより画像を上に指定しても重なり順は一切無視されflashが上にきます。

ビフォー

対処法としては、オブジェクトタグの中に下記のパラメータタグを記述するだけ。

こんな感じに

<param name="wmode" value="transparent" />


※例により<>を全角から半角に直してください。

画像を指定したとき、画像の下に空白ができた…なんてことありませんか?
hタグの中にimgタグを入れたり、テーブルの中に画像を入れたときなど…
これは、ブラウザのバグではなくて、CSSの仕様だそうです。

ビフォー

画像の下に余白ができるのは、ブラウザによっても異なるし、DOCTYPE宣言の違いによっても異なります。
そもそもこの余白って何?って感じですが、これの余白は画像をテキストのベースラインに揃えて表示されるからです。

ベースラインとは、アルファベットの小文字を書くとき"a"と"g"では"a"の下部と"g"の真ん中あたりが同じ位置にきます。"g"のほか、"p"や"q"などもベースラインよりも下に文字がはみ出ます。その"a"の下部の位置が基準となります。その基準がベースラインです。

アフター

画像の下に余白を作らないためには画像をベースラインに合わせずに一番下に合わせればいいわけですね。
スタイルシートで以下のように設定してください。


img {
vertical-align: bottom;
}


これで、画像の下から空白が消えます。
コピーライトの年を自動取得するスクリプトです。


Copyright © <script type="text/javascript">myDate = new Date();myYear = myDate.getFullYear();document.write(myYear);</script> XXXX All rights reserved.

例により<>を全角から半角に直してください。

スクリプトの前に制作年を入れて"2009-XXXX"とするともう勝手に更新されますね。

※<>は半角に変換する