ＩＥ6で確認

スタイルシートを編集後ＩＥ6での表示の仕方を確認しました。もう殆ど使われていないと思いますが、まだサブ機がアップグレードしていないので。

画像を見てもらうと解るかと思いますが、透過部分にはＧＩＦのメッシュを使っています。文字は多少読み難くなりますが、イメージ的には大体同じ物を得られるので良しとしてます。

今回驚いたのは、全くＩＥ6に配慮せずに編集していたにも拘らず、修正が必要ないほどレイアウトの崩れがなかった事です。たしかmargin/paddingの解釈に不具合があって同じ様なレイアウトにはならなかったと記憶していたのですが・・・

結果オーライなので楽でした。もしかすると最新版？のＩＥ6では表示の不具合が修正されているのかな。

で、どうやってＰＮＧ画像とＧＩＦ画像を自動的に切り替えているかというと、過去に紹介しているので、そのブログをまるっと引用すると。

---

本日はＩＥ６での透過処理について、えす＃055のページ白背景Ver,においては殆どのブラウザではこの画像
がコンテンツの背景に使ってありますが、ＩＥ６で閲覧した場合にのみこの画像
を使うようになっています。

で、その場合のスタイルシートの記述はこんな感じです。

詳細編集/コンテンツ共通/コンテンツ表示(div.contents)
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg);（透過png画像）
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p8.jpg);(透過gif画像)
「_background-image:***」がＩＥ６専用のタグになっていて、ＩＥ６のみｇｉｆ画像を使用するようになっています。詳しくは忘れましたがＩＥ６のバグを利用した技だとか何とか・・・
ＩＥ６の場合は少々文字が醜く見難くはなりますが、イメージ的にはほぼ同じ物が見えると思います。

これはＩＥ６がpng形式画像（正確にはαチャンネル=透過属性）の表示に対応していない為の措置です。png形式の特徴は大雑把に言えば「可逆圧縮性」「透過属性」の二つだと思っています。
可逆圧縮性はここでは触れませんが、透過属性は見ての通りです。本来部分的に透過率を変える事(透かしみたいな感じ)も出来る筈ですが、現在対応した編集ソフトを持っていないのと、編集そのものの手間を考えると・・・スタイルシートの部品としては必要ないですね。

その代わりに出来上がった画像の透過率だけを編集するソフトは持っているので、必要を感じたら時間のあるときにまとめて作って、作業手帳にアップしています。

ＩＥの場合ｇｉｆの画像は小さ過ぎるとブラウザの表示が極端に遅くなるので少し大き目の物を使っています。

また、ＩＥ６での背景の固定は詳細編集にて、「ページBody(body)」に背景画像を指定します。
background-image:url(背景画像のＵＲＬ);
background-repeat:no-repeat;---リピートする場合は不要
background-position:50% 0%;---左右方向は真ん中、上下方向は上寄せ
background-attachment:fixed;---固定しない場合は不要

そして「ユーザー領域(div#MinkaraBody)」のbackgroud****が残っていると重ねて表示されbodyに表示した画像が見えなくなるので一式削除します。最もこれを利用して大きなヘッダーやフッターを作る事も出来るのですが、これはまた別のブログで紹介しています。