RenzSpace Free Style Blog

さて、LightBox結構色々なサイトで使用されている模様ですが、皆さんもご利用中でしょうか？？？使用する際の注意点として数点。

まず最初に、Windows IEで表示がおかしくなる。『黒半透明の背景が途中できれてしまう…FireFoxでは大丈夫なのに…』これは、CSSでのbody設定に原因有りです。
中央に幅８００pxでコンテンツを表示させたい場合、body{width:800px; margin:0 auto;}と記述する方法があり、私も参考にしていたものがそうだったので、そうして来たのですが（CSS検査では問題なし。各ブラウザ表示バグもなし）この設定にすると、LightBoxのCSS設定に影響を及ぼし、本来ならブラウザ全体に黒半透明がしかれその上にイメージが出てくるのですが、半透明エリアも800pxしか表示されなくなります。

bodyに幅設定がされているため、その領域しか存在出来なくなるからですね。そこで、考え方を変えてbody自体の幅設定をなくしてしまえば問題ないので、CSSを以下に切り換え。

これで、表示問題は解決です。（こっちが一般的なのかな〜）

次の問題点はMacのsafariでは機能しない事…これは、制作時にLightBoxの機能を付けてくれと依頼された時には前もって伝えておく必要が有ります。

さらに、LightBox用のCSS内の記述内容にエラー要素を含んでいる点…base64部分やnextBT,PrevBTに関する部分のCSSはエラーの原因となってしまうため100点を目指すなら使わない方が良いのかな？？？ん〜今後も調べていく必要性が有りますね。

という事で、LightBox使用時の注意事項でしたm(_~_)m

前述した透過PNGに大分関わってくるが、IE7以降や、MACブラウザには必要ないCSSがある。

そこで、狙ったバージョンのみに適用して欲しい場合は、下記の方法が可能だ。

<!–[if lt IE 7]>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

後は、外部CSSリンクなど適宜変更して、自分の環境に合わせて下さい。

今となっては当たり前の方法かもしれませんが、ご存じない方も多いと思いますのでここに記述。内容はタイトル通り、背景画像にPNGを用いる方法です。

背景を半透明にして、全体の背景を透けさせたい！div背景をCSSで半透明化すると、そこに格納されるもの全てが半透明になってしまうので文章が読みズライ…を解消する。

解決策には4つの手順が必要です。

まずは、pngを使えるようにするjs(Javascript)ファイルを入手→HTMLのhead内に下記を追記→classやidを設定。→次にCSS設定

こんな流れです。

jsファイルはここから入手出来ます。iepngfix.js

CSSでは下記を追記（HTMLサイドでは.iepngfixを透過したいdivに追記）

これで、綺麗に半透明が使用出来ますね。ただし、CSS2.1ではエラー表示されてしまうのが残念です。