REDLINE MAGAZINE | 半透明ボックスに関するメモ

半透明ボックスに関するメモ

※2008年2月8日、IE6でinputボタンが押せない件について追記しました。

半透明ボックスに関してのメモ。
デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」

今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。)

半透明のボックスって中身も半透明になるんだよね

CSSだけでボックスを半透明にする方法は以前このブログでも書いたんだけど(CSSで半透明ボックス)、opacity辺りで透明度の指定された親をもつ子要素って、みんな半透明になる。こいつが今回の困った部分。divを入れ子にして透明度100%を指定しても結局親の透明度を継承してるから意味なし。

>>一応どんなもんかサンプルおいておきます。

透過pngさえ使えたら特に問題ないんですが、IEさんがアレなので、とりあえずCSSだけでやるにはどうしたらいいかを考えました。

方法その１・画像で入れる

まず思いつくのが「半透明のボックスの背景画像で切っちゃえばよくね？」の案。だけど文字サイズが可変された場合なんかに背景がついてこない事になる。大きめに画像を切ったとしても一番上はいいけど、2番目以降の背景は下にズレこんでくる。ビミョー。

方法その２・画像で入れて overflow は？

方法その１に加えて高さが変わったときはスクロールするようにすればいいんじゃね？という考え。それならボックスの大きさ自体は変化しないし、背景がズレこむこともない。だけど「背景画像に拘りたいの！」と言ったデザイナからすればこんな所にスクロールバーがでるのはすごく嫌な事だろうな、と。

まぁ高さや幅が変わらなければそれはそれでいいんだろうけど、スクロールバーの発生に備えて、横スクロールが出るのは勘弁だぜってことで右側の余白も確保したり元デザインから幅もコントロールしなきゃならなくなったり、厳しいデザイナに「1pxでもズレたら許さないんだから！」とか言わせたくないし。ビミョー。

方法その３・禁断の空div

個人的には禁断の「空div」で半透明部分を確保する方法。lightboxなんかで画面全体をオーバーレイさせてその上にボックスを置いているのも確かこの方法だった気がする。幅、高さ、透明度なんかを指定した空divに対して position で浮かせて位置、透明度を指定して、その上にさらに中身の入ったボックスを重ねて半透明を実現させる。

>>一応これもサンプルおいておきます。

この方法も中身の高さが変化した際にはCSSだけでは対応できない。というか、いちいち位置を指定するのがものすごくめんどい。非効率すぐる気がする。こういうのは使うなら絶対大きさも場所も変わらない箇所に限定しなくては。。。

方法その４・やっぱりここは javascript ですか

上の3つの案はCSSだけでっていうのが前提なんだけど、要するに透過PNGさえ使えたら何も問題ないわけですよね、バリデータ通らないCSSのプロパティ (opacity 関連)も使わなくて済むし。ということで。IEさんでも透過PNGが使えるように、javascript を利用してなんとかする作戦。

ちょうどさっき jQuery 関連でこんな記事をお見かけしたのでさっそくテストしてみる。

>>jquery.pngFix.js - PNG transparency for Windows IE 5.5 & 6 (IE PNG Fix)

簡単設置で非常に便利。jQuery万歳。

>>jQuery と jquery.pngFix.js を使ったサンプル

これが一番効率いい。IEで js 無効の場合でも半透明にならないだけで、可読性の面では問題ないぞ、と。下記のキャプチャはIEでjs無効の場合のサンプルです。

設置は jQuery 本体と上記 jquery.pngFix.js を head 内で読み込んで、その後ページの読み込みと同時に半透明を使いたいボックスに対して pngFix を有効にしてあげるだけ。あとは普通にcssで問題のpngを背景として指定すればいいだけです。

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery/jquery.pngFix.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('div#sample').pngFix( );
	});
</script>

#sample{
	width:640px;
	height:427px;
	background:url(img/071201_01.jpg) no-repeat;
	}
.contents{
	width:420px;
	background:url(img/071201_02.png);←ここでPNG使ってる
	}
	
<div id="sample">
<h2>サンプルタイトル</h2>
<div class="contents">
<p>テストテストテスト</p>
<p>テストテストテスト</p>
</div>
<h2>サンプルタイトル</h2>
<div class="contents">
<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>これで内容量や文字サイズが変わっても大丈夫かな。</p>
</div>
</div>

pngを使いたい箇所毎に個別に指定をするわけではなく、該当範囲の親に対して指定をすればそれで済むというのがすごく気に入りました。透過pngを古いIEでもサポートできるようなjsライブラリはいろいろあるけど、個人的にはこれが一番楽でした。

IEでinputボタンが反応しない件の対処法

コメント欄にてこのjsを使った場合、IE6でそのボックス内に配置したinputボタンがクリックできない、という現象について教えていただきました。

>>IE6でクリックできないサンプルページ

一応inputタグとbuttonタグ、両方で試してみたところ、どちらもIEではボタン上にマウスが乗っても感知せずクリックできない感じになってます。（但し各ボタン下の方４分の１くらいの高さ部分を狙うとクリックできるという感じ）

対処方法なんですが、inputやbuttonに対してposition:relative;を指定してやるとボタン全体がクリックできるようになりました。

>>positionを与えたサンプルページ

IE7の方ではpositionを与えなくても、ちゃんとクリックできるっぽいです。

2007年12月08日 15:07 | Red | パーマリンク