WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:IE&NNでテーブルを半透明

0:[投稿] としひで [2002/08/20 14:15 ][環境:WIN+IE わからない]

はじめまして。
自分で調べていたのですが、どうにも分からなかったので質問させてください。
ホームページ上で、テーブルを半透明にさせて後ろの背景を浮かび上がらせる、というものを作りました。
自分の環境は、WindowsMe + IE6.0なのですが、これ以外の、NetscapeやMacintoshなどでは、タグの書き方が違うようなのです。
そこで、どの環境でも、同じように半透明にさせるものができればいいなと思い、ここに書き込みました。

いちお、自分で作ったものはこんな感じです。

<TABLE cellSpacing=0 cellPadding=5 width="100%" border=0>
 
 <TR>
   <TD width=120>
 ( 中略 )</TD>
   <TD width=* style="background-color:#996633;filter:Alpha(opacity=80);">
 ( 中略 )
</TD></TR></TABLE>

アドバイスいただけると嬉しいです。
よろしくお願いします。


1:[回答] saori [2002/08/20 14:20 ]

CSSではなくてドットごとに半透明の画像を作ってつかうといいですよ


2:[回答] saori [2002/08/20 14:22 ]

ドットごとに透過して半透明の画像を作って・・・でした(汗)
わかりにくくてすみません。


3:[回答] やじうま1号 [2002/08/20 14:37 ]

filterはMSIE独自拡張でそれに値するようなものは他ブラウザーには無かった気もする


4:[回答] 486 [2002/08/20 15:15 ]

>CSSではなくてドットごとに半透明の画像を作ってつかうといいですよ

見る側は遅くてたまらんがな。


5:[回答] TOM neko [2002/08/20 15:33 ]

>>4
ドットごとにファイルを作るんではなくて、ドットごとに半透明な画像ではないかと。つまりチェック模様。


6:[回答] saori [2002/08/20 16:02 ]

>>5
フォローありがとうございます。
チェック模様なんです。
#ずっと前にプリクラのCGIの設置を教えていただいたsaoriです。
#お世話になっています。


>>4
おっしゃるとおりです、
チェックの半透明の画像を使ったとしても、
背景に大きな面積で使ったページで画面をスクロールした場合は、
画像をドットごとに再描写するためCPUで計算をする時間がかかってしまい
コンピュータの能力によってはスムーズにはうごきません。

小さな面積でつかった例
http://musemew.vis.ne.jp/hantoumei_corner/hantoumei_coner/hantoumei_coner.html

大きな面積でつかった例
http://nq5.gaiax.com/www/compile/t/r/tirol/diary.html

前に半透明のテーブルを作ったときMSIE独自拡張で他のブラウザでは
opacityはできないと見かけたのですがソースの場所を忘れてしまいました。

他のブラウザでも半透明にできる良い方法をご存知でしたら
お手数をおかけしますが教えていただけると嬉しいです。。


7:[質問] としひで [2002/08/20 16:05 ]

さっそくのお返事ありがとうございます。

ドットごとの半透明な画像、という意味がいまいち分からないのですが、小さい透明な画像を作って、それをテーブルの中に背景として並べる、という意味でしょうか。

CSSを使う場合、
http://www.openspc2.org/reibun/css/
このページの「フィルタ効果」の部分に書いてあるような、-moz-opacity をうまく応用してNetscapeでも適用できるのではないかと、思っているのですが、それは難しいでしょうか。

お手数をおかけしますが、なるべく多くの人が同じように見れるようなものを作りたいと思っています。


8:[回答] としひで [2002/08/20 16:14 ]

>>7
実際に使われている例を見て、分かりました。テーブルの枠自体を透明な画像で並べる、という意味なんですね。
ありがとうございました♪
参考にさせていただきます。


9:[回答] としひで [2002/08/20 16:15 ]

↑間違えました。>>6ですね、saoriさん宛です。ごめんなさい。


10:[回答] saori [2002/08/20 16:25 ]

CSSで参考になりそうなページです

『Mozillaの独自拡張CSSは使わないでください』
http://www.mozilla.gr.jp/standards/webtips0001.html


11:[完了] としひで [2002/08/21 01:07 ]

ご丁寧な回答ありがとうございます。
CSSでのMozillaのページも見ました。
少し難しかったのですが、Mozillaの独自拡張CSSが不安定なものだということなんですね。
タグの方は、CSSを使って自分なりに書いてみたのですが、もしよかったら見てもらえると嬉しいです。
   <TD width=* style="background-color:#ffffff;filter:Alpha(opacity=80);-moz-opacity:0.8;">

半透明が適用されるのは、(Win)IE4以上、NS6 / (Mac)NS6 ということになるのでしょうか。
ともかく、みなさんお返事ありがとうございました。
少しでもいろんなことが分かってよかったです。


12:[完了] saori [2002/08/21 18:51 ]

>><TD width=* style="background-color:#ffffff;filter:Alpha(opacity=80);-moz-opacity:0.8;">
このソースで、背景をエンベディングで定義して半透明を確認してみました。
opacityをtdに定義していますので、もちろん背景色だけではなく文字も半透明に表示されます。

Windows Me
IE5.5(半透明)
Netscape 6.2.1(不透明)

以下は確認したソースです。
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body{background-color:#000000;
    background-image:url(bg.gif);}
-->
</style>
<title>半透明テスト</title>
</head>

<body>

<table><tr><td width="300" style="background-color:#ffffff;filter:Alpha(opacity=80);-moz-opacity:0.8;"> test        
</td></tr></table>

</body>
</html>

---------------------------------

>>半透明が適用されるのは、(Win)IE4以上、NS6 / (Mac)NS6 ということになるのでしょうか。
他の環境は分かりません>>7のhttp://www.openspc2.org/reibun/css/でご覧になってください。


参考になるページ
『要素の属性による適用』
http://www.parkcity.ne.jp/~chaichan/src/style.htm#zokuteki

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World