締切済み

iflameのテーブルは透過し画像は透過しない方法

2013/04/02 23:33

ホームページを作っています。 CSSを使用し、インラインフレームのページを作っております。そこで困っているのがCSSの設定なのですが、インラインフレーム部分とメニューコンテンツの部分の背景を半透明に透過したい＆画像は全て透過したくないのです。そこで、まずはメニューコンテンツ部分の背景を透過するため CSSの方を下記のように設定しました。 .sitetitle{ font-size: 20px; font-weight:bold; color:#666633; letter-spacing:4px; padding:0px 0px 5px; background: #fff; filter:alpha(opacity=50); opacity:0.9; } それから、このsitetitle内に載せる画像をHTMLで設定しました。 <div class="sitetitle"> <img src="index_files/03.jpg" width="210" height="170" ></div> ですが、画像まで透過されてしまいます（キャプチャ画像のように）画像は透過したくないのですが、どのようにｃｓｓの設定をし、HTMLタグを書けば良いのでしょうか？ブラウザはFireFoxですが、グーグルクロムでも動作確認を行います。

sayjuly
お礼率62% (37/59)

CSS
回答数4
ありがとう数2

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

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/04/04 10:12 回答No.4

本体から参照されるふたつのHTMLです。こちらは、HTML4.01strictです。 foo1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p><img src="./images/abc1.jpg" width="200" height="200" alt=""></p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> foo2.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p><img src="./images/abc1.jpg" width="200" height="200" alt=""></p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/04/04 10:04 回答No.3

ごく簡単な例です。本体はiframeを使用するためtransitinalとstrictです。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) 　DATAタグででチェック済み ★タブは＿に置換してあるので戻すこと [HTML4.01transitinal]非推奨 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>Untitled</title> ＿<meta name="author" content="ORUKA"> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:ORUKA1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> <style type="text/css" media="screen">  </style> </head> <body> ＿<div class="header"> ＿＿<h1>title</h1> ＿</div> ＿<div class="section"> ＿＿<h2>section Title</h2> ＿＿<div class="section"> ＿＿＿<div class="frame"> ＿＿＿＿<p> ＿＿＿＿＿<iframe src="foo1.html" width="400" height="300" scrolling="auto" frameborder="1" title="透明"> ＿＿＿＿＿＿[ご利用中のユーザエージェントは、フレームに対応していないか、フレームを表示しないよう設定されているようです。こちらの <a href="foo1.html">関連文書(1)</a> を御覧ください。] ＿＿＿＿＿</iframe> ＿＿＿＿＿<iframe src="foo2.html" width="400" height="300" scrolling="auto" frameborder="1" title="画像不透明"> ＿＿＿＿＿＿[ご利用中のユーザエージェントは、フレームに対応していないか、フレームを表示しないよう設定されているようです。こちらの <a href="foo2.html">関連文書(2)</a> を御覧ください。] ＿＿＿＿＿</iframe> ＿＿＿＿</p> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer" id="DOCUMENT_INFORMATION"> ＿＿<dl class="document-version"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2013 - 2016 All Rights Reserved</address> ＿</div> </body> </html> [HTML4.01strict]推奨 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>Untitled</title> ＿<meta name="author" content="ORUKA"> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:ORUKA1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> <style type="text/css" media="screen">  </style> </head> <body> ＿<div class="header"> ＿＿<h1>title</h1> ＿</div> ＿<div class="section"> ＿＿<h2>section Title</h2> ＿＿<div class="section"> ＿＿＿<div class="frame"> ＿＿＿＿<p> ＿＿＿＿＿<object data="foo1.html" width="400" height="300"> ＿＿＿＿＿＿[ご利用中のユーザエージェントは、フレームに対応していないか、フレームを表示しないよう設定されているようです。こちらの <a href="foo1.html">関連文書(1)</a> を御覧ください。] ＿＿＿＿＿</object> ＿＿＿＿＿<object data="foo2.html" width="400" height="300"> ＿＿＿＿＿＿[ご利用中のユーザエージェントは、フレームに対応していないか、フレームを表示しないよう設定されているようです。こちらの <a href="foo2.html">関連文書(2)</a> を御覧ください。] ＿＿＿＿＿</object> ＿＿＿＿</p> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer" id="DOCUMENT_INFORMATION"> ＿＿<dl class="document-version"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2013 - 2016 All Rights Reserved</address> ＿</div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/04/03 13:31 回答No.2

＞・間違いなくインラインフレームを使用しており＞　フレームの作り自体は正しくできていると思います。　でしたら、単純にHTMLは <div class="frame"> 　<iframe src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [ご利用中のユーザエージェントは、フレームに対応していないか、フレームを表示しないよう設定されているようです。こちらの <A href="foo.html">関連文書</A> を御覧ください。] </iframe> </div> 　になっているはずです。それ以上なにもしません。呼び出されるHTML(この場合foo.html)のスタイルシートで、opacityないしrgbaを指定する。　なお、strictDTDの場合は、に<iframe>ではなく<object>を使いましょう。　方法は同じです。

質問者

お礼 2013/04/03 23:54

ありがとうございます。＞呼び出されるHTML(この場合foo.html)のスタイルシートで、opacityないしrgbaを指定する。とのことですので、呼び出されるHTMLのスタイルシートの中にあるopacityという部分を見てみました。初めの質問の文に書いたとおり、 .sitetitle{ font-size: 20px; font-weight:bold; color:#666633; letter-spacing:4px; padding:0px 0px 5px; background: #fff; filter:alpha(opacity=50);　　←ここ opacity:0.9;　　　　　　　　←ここ } 上記2箇所に既にopacityという表記があります。＞opacityを「指定する」・・・とは数字を換えてみる、ということでしょうか？ opacityの後ろにある数字を換えてみたのですが、フレーム・テーブル全体の透過具合が変わってそれと一緒に、やはり画像まで透けてしまいます。（つまりまだ何も解決していません）画像は透けさせたくないのです。 opacityの直後に「rgba」とも書いてみましたが何も変わりませんでした。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/04/03 07:39 回答No.1

インラインフレームではないのでは？ ★iframeは非推奨です。HTML5では使える。 ★iframeは他のファイルを表示する方法　要素の半透明にはopacity,色の半透明にはrgbを使います。　デザインのためにHTMLを書くのはダメ!!!これは、上達しようとすれば必須です。HTMLはきちんと文書構造がマークアップされてさえいればよい。プレゼンテーションはスタイルシートで行います。

質問者