ベストアンサー

CSSの背景を半透明

2007/10/20 10:54

http://www.tacky.cc/program/htm_tips/html/style01a.htmのサイトからサンプル抽出して、色々手を加えていますが、よく分からなくなってしまいました。そこで質問ですが、下記のプログラムでわからない事がありますイメージとしては、アップルの場所は忘れましたが、透明の画像が、3.4重に重なっている感じにしたいと思っています。 <HTML><HEAD> <STYLE TYPE="text/css">  DIV.sample03 { background-color:#2E2921; position:relative; top:-500px; right:-100px; height:300px; width:500px; filter:Alpha(opacity=60); z-index:3; color:#ffffff; font-size:x-small; padding:3px;} }  DIV.sample04 { background-color:#F7CE71; position:relative; top:3000px; right:-10px; height:180px; width:200px; filter:Alpha(opacity=40); z-index:1; color:#000000; font-size:x-small; padding:3px;} } --> --> </STYLE></HEAD> <BODY> <BASEFONT SIZE="2"> <table><tr><td> <DIV CLASS="sample01"> <DIV CLASS="sample02"> <DIV CLASS="sample03"> <DIV CLASS="sample04"> </table></td></tr> </BODY></HTML> このようなプログラムにしましたが、何も表示されなくなってしまいました。原因はpositionの指定が悪いと思います（pxを変更後おかしくなりました）で、「top:*px;」「right:*px;」「height:*px;」「width:*px;」の意味がわかりません。高さや長さというのはわかりますが、それから、「DIV.sample*」の中に「background-color:#F7CE71;」があるのに、さらに「color:#000000;」の二つある意味がわかりません。サンプルをコピーして、手を加えたので、理解していない部分があるので、参考になるアドバイスお願いします。

noname#57880

HTML
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

leap_day
ベストアンサー率60% (338/561)

2007/10/20 12:29 回答No.2

こんにちはいろいろと記述ミスとか勘違い(?)があるからですねまず総括で CSS部分　DIV .sample01 { } } のように終了『 } 』が2回使われている top: right: height: にマイナスを使用している(使用はできますが使いどころが違います) <div></div>で閉じていない </table></td></tr>でなく</td></tr></table>である filter:alpha(opacity=*);はIE専用であるで疑問の方は何も表示されない　position指定によって画面外に表示させてる為です top:*px;　画面上から*pxの位置に位置取りを決める right:*px;　画面右から*pxの位置に位置取りを決める(一般的にはleft:*px;の方を使用します。右からの位置決めのほうが見易い場合はその限りではありません） height:*px;　（<div></div>の）高さを決める width:*px;　（<div></div>の）幅を決める background-color:#000000;　（<div></div>の）背景色を決める color:#0000000;　（<div></div>の）文字色を決める position:relative;　これを置いたところをtop:0px;left:0px;に決める　→　position:absolute; の間違いでは？(重なりをするのであれば） padding:*px;　対象要素の内側の４辺からの空白を設定する z-index:*　重なりの順番を決める(数が多い方が上) 位置決めはマイナス指定だったのでどういう風に配置するのか分かりませんのでとりあえず０pxにしています文字色も白地に白文字とかになっててよくわからなかったのでとりあえず黒文字にしてます <style type="text/css"></style> </style> <![endif]--> </head><body> <table><tr><td> <div class="sample01"> </div> <div class="sample02"> </div> <div class="sample03"> </div> <div class="sample04"> </div> </td></tr></table>

質問者

お礼 2007/10/21 22:23

あせっていたので、抜けていた部分や、順番が違う所がありましたね。タグの説明、ありがとうございました。アレンジするときに大変役にたちました。サンプルありがとうございます。おかげさまで、納得の行くデザインのＨＰが作れました。

その他の回答 (2)

MAN_MA_RUI
ベストアンサー率41% (426/1024)

2007/10/21 06:12 回答No.3

質問と直接関係ないですけどfilter: alpha(opacity=50);の部分を以下のようにすれば非IE系ブラウザでも半透過表示できるようになります。尚、これは答えじゃないのでポイントはせがまない。 filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;

質問者

お礼 2007/10/21 22:27

こういったものも大変参考になります^^ 早速導入したいと思います。ちゃんとお礼のポイントを差し上げます。（「お礼＝ポイントが付く」でしたよね？もしポイントが付かなかったらゴメンなさい）

noname#56851

2007/10/20 11:37 回答No.1

全部は見ていませんが <table><tr><td> <DIV CLASS="sample01"> <DIV CLASS="sample02"> <DIV CLASS="sample03"> <DIV CLASS="sample04"> </table></td></tr> この部分で　</div> が抜けている。 divを重ねるなら</div>を<DIV CLASS="sample04">と</td></tr></table>の間に四つつづけて書かなくてはいけない。 table関係の入れ子の順番が違う。 </td></tr></table> の順番で書いて下さい。あと、これはIEでしか表示されないので……

質問者

お礼 2007/10/21 22:21

抜けていた部分や、順番が違うところがありましたね。失礼しました。（あせってたもので。） IE専用なんですね。参考になりました。ありがとうございました。

CSSの背景を半透明