Illust & Music 月の高いところ

今日のプリン言

謎のプリン語る。
一人書く人増えました。

IE6の背景フルスクリーン

2012年06月20日

みやびプリン 140 87

144 144

※この記事は7年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

本当にIE6ほど厄介なブラウザはない。
だいたい、もうIE6を使ってる人は約1%ほどしかいない(らしい)ってのに、なんでそれに対応せなあかんねん。制作時間二倍はかかるんだよ!?

・・・さて本題に入ろう。
HTMLのコーディングの際、背景を画面いっぱいに表示してほしい、というのはよくある依頼である。
今であれば、JQueryを使ったプラグインがフリーで多数落ちているので、さほど苦労しなくても実装できる。

bgStretcher
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

BACKSTRETCH
http://srobbin.com/jquery-plugins/backstretch/

maxImage Scaling Plugin
http://www.aaronvanderzwan.com/maximage/
参考記事:http://blog.daichifive.com/archives/748

Anystretch
https://github.com/danmillar/jquery-anystretch
参考記事:http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jquery-anystretch.html

僕は今回の案件ではAnystretchってやつを使いました。DIVにも使えるから具合がいい。
また、モダンブラウザであれば、CSS3を使ってフルスクリーン背景を実装できる。
(ごめんなさい、いい記事見つからなかった・・・)

・・・しかし、実は上記のいずれのプラグインでも方法でも、IE6ではフルスクリーンは実装できない。
プラグインに関しては、一応は、IE6対応とうたっているプラグインも、実際に使ってみると、背景が途中で切れたりなど、そもそも動かなかったりなど、正直厳しい・・・。

それでは、IE6ではフルスクリーン背景はできないのか・・・?
Flashを使うしかないのか・・・?

そんな事はない!
まだ無理矢理やる方法がある!
そう、言わずと知れた、IEの独自仕様である、filterを使う方法である!

CSS3のみでフルスクリーンの背景画像を実装する方法まとめ3つ

あ、三つあるの・・・?
おほん、
僕も、今回の案件には、このfilterを使う方法を使わせていただきました。
html {
	...
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像のパス', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像のパス', sizingMethod='scale')"; 
	}

スターハックなどを使ってIE6のみ、このfilterを使って背景をフルスクリーンで表示できる。
ただし、ブラウザのサイズを変えると、縦横比が変わってしまう・・・。(泣)
だが、そこは、表示できるんだからマシだと、目をつぶっておこう(自分に言い聞かせ)

なんにせよ、ここまでくるのに、実に5、6時間かかった・・・。
(主にJavascriptきかねぇ~って叫んでた)
これを見たWEBデザイナーが、1時間以内でできちゃったりしたら、幸いなことこの上ない。

最後に、このfilterを使う時の注意点だが、画像のパスは、CSSを読み込んでいる"HTML"からのパスとなるので注意していただきたい。
これは、Javascriptからファイルを読む時や、PIEなどのetcファイルをCSSに読み込む時と同様である。

解決して嬉しかったからつい長くなっちまったw

鬼斬 - メイン

トラックバック(0)

トラックバックURL:

コメントする