- ベストアンサー
インラインフレームの半透明化
- インラインフレームの半透明化について、参考にしたページでうまく実現できない状況です。
- インラインフレームのソースコードには、疑似インラインフレームを作るためのCSSが含まれています。
- 半透明化のプログラムをどこに記述すれば良いかわからず、アドバイスをいただきたいです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
繰り返しますがインラインフレームではありません。インラインフレームぽく見せる方法です。 まず、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; }
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
インラインフレームじゃありませんよ!! 要素なり、画像を透明化するには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)、二つ目は背景だけ半透明にしています。
お礼
回答ありがとうございます。 すでにできている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> この中のどこにインラインフレームを記述すればいいでしょうか？ ご教示お願いします。
【記述例】 <style type="text/css"> .logbox { border: solid 1px #808080; width: 240px; height: 120px; padding: 0.5em; overflow: hidden; filter: alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25; } p { color: #008000; } </style> ↑ の filter: alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25; の部分が半透明のコードです。 上の例は25％の表示です。 ※ *.logbox とか q とか、不適切なcssは修正しました。 基本的なcss記述の方法をもう一度確認することをオススメします。
お礼
回答ありがとうございます。 インラインフレームの色とかどうやって変えますか？ 応用がききません。
お礼
回答ありがとうございます。 どうしてもインラインフレームはできるのですが、 インラインフレーム内に表示される透明化されたファイルを つくることができません。 ちょっと回答者さんのやり方は、難しいので もっちょっと簡単なプログラムでお願いします。