みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

ホームページを作っています。
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>

ですが、
画像まで透過されてしまいます(キャプチャ画像のように)

画像は透過したくないのですが、どのように
cssの設定をし、HTMLタグを書けば良いのでしょうか?

ブラウザはFireFoxですが、グーグルクロムでも動作確認を行います。

投稿日時 - 2013-04-02 23:33:52

QNo.8024425

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.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">
<!--
body{color:rgba(0,0,0,0.5);}
a:link{color:rgba(0,0,255,0.5);}
a:visited{color:rgba(125,125,0,0.5);}
a:hover{color:rgba(255,0,0,0.5);}
a:active{color:rgba(255,255,0,0.5);}
-->
_</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>&copy; 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">
<!--
body{opacity:0.5;}
-->
_</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

投稿日時 - 2013-04-04 10:12:36

ANo.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">
<!--
body{background-image:url(./images/ttl1.png);}
div.frame p{text-align:center;}
iframe{margin:0 5px;}

-->
</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>&copy; 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">
<!--
body{background-image:url(./images/ttl1.png);}
div.frame p{text-align:center;}
object{margin:0 5px;border:inset 2px gray;overflow:auto;}

-->
</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>&copy; ORUKA1951 2013 - 2016 All Rights Reserved</address>
_</div>
</body>
</html>

投稿日時 - 2013-04-04 10:04:29

ANo.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 13:31:17

お礼

ありがとうございます。

>呼び出される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」とも書いてみましたが何も変わりませんでした。

投稿日時 - 2013-04-03 23:54:49

ANo.1

インラインフレームではないのでは?
★iframeは非推奨です。HTML5では使える。
★iframeは他のファイルを表示する方法

 要素の半透明にはopacity,色の半透明にはrgbを使います。

 デザインのためにHTMLを書くのはダメ!!!これは、上達しようとすれば必須です。HTMLはきちんと文書構造がマークアップされてさえいればよい。プレゼンテーションはスタイルシートで行います。

投稿日時 - 2013-04-03 07:39:22

お礼

ご回答ありがとうございます。

・間違いなくインラインフレームを使用しており
 フレームの作り自体は正しくできていると思います。

・>要素の半透明には~
 つまりどのように書けば良いのでしょうか。

結局まだわからず、修正に向けて全く動き出せておりません。
ご指導お願いできたらと思います。

投稿日時 - 2013-04-03 08:40:26

あなたにオススメの質問