インラインフレームの半透明化

解決済

質問者：4x7z1mm0z
質問日時：2013/03/02 00:50
回答数：3件

ここのぺーじを
www.geocities.jp/eijispace/2011/1231.html
参考にしたのですが、
うまく半透明化できません。

インラインフレームのソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>疑似インラインフレーム</title>
<style type="text/css">
*.logbox
{
border: solid 1px #808080;
width: 240px;
height: 120px;
padding: 0.5em;
overflow: hidden;
}
q { color: #008000; }
</style>
</head>
<body>
<h1>疑似インラインフレームを作ってみよう！</h1>
<div class="logbox">
<p>OLY OLY OLY OH ! YELY YELY YELY YEAH !</p>

</div>
</body>
</html>
半透明化のプログラムをここのどこに記述すればできますか？
ご教示お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2013/03/02 18:18

　繰り返しますがインラインフレームではありません。

インラインフレームぽく見せる方法です。
　まず、HTMLとCSS、javascriptは分けて考えてください。でないと先に進めません。
　あせったらダメです。急がば回れ!!
HTMLにて、【注】見やすいようにタブは全角スペースに置換してある。
<body>
　<div class="header">
　　<h1>文書のタイトル</h1>
　　<p>要約など</p>
　</div>
　<div class="section">
　　<h2>本文タイトル</h2>
　　<p>本文記事の段落</p>
　　<p>本文記事の段落</p>
　　<div class="article">
　　　<div class="header">
　　　　<h3>独立した記事(1)のタイトル</h3>
　　　</div>
　　　<div class="section">
　　　　<p>記事内容</p>
　　　　<p>記事</p>
　　　　<p>長くなるとスクロールバーが出てくる。</p>
　　　</div>
　　</div>
　　<div class="article">
　　　<div class="header">
　　　　<h3>独立した記事(2)のタイトル</h3>
　　　</div>
　　　<div class="section">
　　　　<p>記事内容</p>
　　　　<p>記事</p>
　　　</div>
　　</div>
　</div>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>
　のようにHTMLには文書構造をそれを構成する要素の内容に合わせてマークアップしていきます。(注)ここでのclass名は、HTML5の新しい要素を参考にしています。

　背景画像を変えたいのですから、javascriptを書きます。それを呼び出すタイミングをbodyが読み込まれたタイミングにするために
onload="timerID=window.setInterval('my_clock()',250);"
をbody要素に書き加えておきます。

　次に、独立した記事(headerやsection,footerを持つかもちうる、それ自体が独立しうる記事)としてマークアップされている本文内のふたつのDIV
-----DIVはこの様に要素をグループ化するために使用します。文書構造を示すためにclass名などをつけます。-----をインラインフレームのように、スタイルシートを使って本文中に配置します。
　そのときに、文書構造がマークアップされているので、それを使用します。

html,body{width:100%;margin:0;padding:0;}
div.header,div.section,div.footer{
width:80%;max-width:900px;
margin:0 auto;
}
div.section{position:relative;}/*位置の基準とするため */

div.section div.article{
/* div.sectionの子孫であるすべてのdiv.article */
width:48%;/* 親のdiv.sectionの半分の幅 */
height:300px;
margin-left:0 1%;
border:ridge 3px gray;
overflow:auto;
background-color:yellow;
opacity:0.3;
color:rgb(0,0,255);
}
div.section div.article + div.article{
/* 隣接セレクタ、兄にdiv.articleがあるdiv.article */
position:absolute;
right:1%;bottom:0;
opacity:1;
color:rgba(0,0,255,0.3);
}
div.section div.article:hover{
/* マウスホーバーのとき */
color:rgb(0,0,255);
opacity:1!important;
color:rgb(0,0,255)!important;
}

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
どうしてもインラインフレームはできるのですが、
インラインフレーム内に表示される透明化されたファイルを
つくることができません。
ちょっと回答者さんのやり方は、難しいので
もっちょっと簡単なプログラムでお願いします。

通報する

お礼日時：2013/03/04 00:14

No.2

回答者： ORUKA1951
回答日時：2013/03/02 08:57

インラインフレームじゃありませんよ!!

要素なり、画像を透明化するにはCSS3の
opacityプロパティで行ったり、色の値をrgba()で指定します。

[Sample]下記はタブを＿に置換してあるので戻すこと。
<div class="article">
＿<h2>A smaller heading</h2>
＿<p>
＿＿本文記事がここ
＿</p>
</div>
<div class="article">
＿<h2>A smaller heading</h2>
＿<p>
＿＿本文記事がここ
＿</p>
</div>

に対して・・

body{background:url(./images/A.jpg);}
div.article{
border: solid 1px #808080;
width: 240px;
height: 120px;
padding: 0.5em;
overflow: hidden;
opacity:0.3;
background-color:white;
}
div.article+div.article{
opacity:1;
background-color:rgba(255,255,255,0.3);
}

最初のdiv.articleは全体を半透明(0.3)、二つ目は背景だけ半透明にしています。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
すでにできているif文によって背景を変えるプログラムに新たに
インラインフレームを追加したいのですが、たいへん気が引けるのですが
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows">
<title>sample</title>
<script language"JavaScript">
function my_clock(){
var h, m, s;
var hh, mm, ss;
mydate= new Date();
h=mydate.getHours();
hh=h+":";
m=mydate.getMinutes();
mm=m+":";
s=mydate.getSeconds();
mytime=hh+mm+s;
sam1.innerHTML=mytime;
}
</script>
<script language="JavaScript">
now = new Date();
hour = now.getHours();
b1 ="<body background='aozora.jpg' text='green'>"
b2 ="<body background='yuuhi.jpg' text='black'>"
b3 ="<body background='hosizora.jpg' text='yellow'>"
if (hour >=7 && hour <15)
document.write(b1);
else if(hour >=15 && hour <23)
document.write(b2);
else
document.write(b3);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows">

</head>
<body onload="timerID=window.setInterval('my_clock()',250);" textcolor="black" text="white">
<div style="width : 711px;height : 42px;top : 6px;left : 19px;
position : absolute;
z-index : 1;
" id="Layer3" align="center">
<DIV id="sam1" style="font-size:24pt"></DIV>
</div>
<div style="width : 711px;height : 17px;top : 41px;left : 39px;
position : absolute;
z-index : 2;
" id="Layer2" align="center">
<HR>
</div>
</body>
この中のどこにインラインフレームを記述すればいいでしょうか？
ご教示お願いします。