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

2023/09/04 22:51

このQ&Aのポイント

インラインフレームの半透明化について、参考にしたページでうまく実現できない状況です。
インラインフレームのソースコードには、疑似インラインフレームを作るためのCSSが含まれています。
半透明化のプログラムをどこに記述すれば良いかわからず、アドバイスをいただきたいです。

ベストアンサー

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

2013/03/02 00:50

ここのぺーじを 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> 半透明化のプログラムをここのどこに記述すればできますか？ご教示お願いします。

4x7z1mm0z
お礼率65% (57/87)

CSS
回答数3
ありがとう数3

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

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

ベストアンサー

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

2013/03/02 18:18 回答No.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; }

質問者

お礼 2013/03/04 00:14

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

その他の回答 (2)

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

2013/03/02 08:57 回答No.2

インラインフレームじゃありませんよ!! 要素なり、画像を透明化するには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)、二つ目は背景だけ半透明にしています。

質問者

お礼 2013/03/02 11:32

回答ありがとうございます。すでにできている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> この中のどこにインラインフレームを記述すればいいでしょうか？ご教示お願いします。

noname#187595

2013/03/02 01:18 回答No.1

【記述例】 <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記述の方法をもう一度確認することをオススメします。

質問者

お礼 2013/03/02 02:06

回答ありがとうございます。インラインフレームの色とかどうやって変えますか？応用がききません。

関連するQ&A

ＣＳＳ今度は外部ファイル！
前回「ＣＳＳが反映されない」で質問させていただきました。おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。ところで、今度は外部ファイルの読み込みで「できない！」となっています。自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名　hp-name.css ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> <div class="hp-name"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・で、外部ファイルを読み込むだけではいけないのでしょうか？それとも、外部ファイルの書き方がいけないのでしょうか？外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css">  </style> をつけてみたのですが、ダメでした
- ベストアンサー
- その他（インターネット・Webサービス）
CSSでのブロック要素に囲み線
下記、記述では#lineと#headerがぴったり重なると思うのですが、ブロック要素（#lineの部分）にborderを設定するとマージンができてしまうのですが、なぜでしょうか？border部分を削除するとぴったり重なります。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"></style> </head> <body> <div id="line"> <div id="header"> <p>aaa</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
font-familyで書式が指定しても変化しない
cssでfont-familyを指定しているのですが、デフォルト書式のまま変化しません。原因が分からないのですが、可能性としてどんなことが考えられますか？ちなみにエディタはTeraPadです。 html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css; charset=utf-8" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <head> <body> <p>テスト</p> </body> </head> css p{ font-family:ＭＳ明朝; }
- ベストアンサー
- CSS
html,css初心者です。ヘッダーの余白について
ヘッダーの余白について教えて下さい。どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="font.css" type="text/css"> </head> <body> <div id="header"> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。
- ベストアンサー
- HTML
z-indexを指定したボックスの下に表示させる
z-indexとjavascriptを組み合わせて下記のようなページを作っています。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript">  </script> <style type="text/css"> div#aaa { z-index: 2; position:absolute; width: 300px; } div#bbb { z-index: 1; position:absolute; width: 300px; } </style> </head> <body> <h1>あああ</h1> <p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p> <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>うううううううう<br /> うううううううう</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ</p> </div> <p>いいいいいいいいい<br /> いいいいいいいいい</p> </body> </html> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。これを表示させる方法をご存じでしたら教えてください。
- ベストアンサー
- 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> </HEAD> <BODY> <img src="./image/2151.jpg"> </BODY> </HTML>
- ベストアンサー
- HTML
cssが反映されません・・・
HP初心者です。現在ホームページビルダーで編集してます。もともとあるHPを引き継いで編集しているのですが、2カラムcssに挑戦しました。http://css.uka-p.com/index_2column.shtml やってみたのですが、反映されません。プレビューにするとエラー検出になり、強制的に<body>以下に位置づけられて、ただのテキストとしてHP上にずらずら文字が出てきてしまいます。左右も反映されてません。ちなみに、こんな感じで書き込みました。 <head> <meta name="ROBOTS" content="all" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="style.css" type="text/css" /> body {text-align:center; } outline { width:600px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .contents{width:350px;float:left;} .menu{width:240px;float:right;} .c-both{clear:both;} </head> link以下のbodyからが私の書き込みです。宜しくお願いします。
- 締切済み
- HTML
CSS classの場合とidの場合の指定方法
h1などをブロック要素ごとに、違うスタイルを適用させたく、下記のように、記述したのですが、ブロック要素をidで指定する場合は同じように、#mainと#main h1で指定し、<div id="main">とすればよいのでしょうか？それとも、h1は.main h1 とクラス指定して、<div id="main" class="main">とした方がよいのでしょうか？変な質問かもしれませんが、どちらも同じように表示するので、どちらがよいのか分かりません． <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"></style> </head> <body> <div class="main"> <h1>aaa</h1> </div> </body> </html>
- ベストアンサー
- HTML
HTMLで○や■などをテキストの代用とした時
HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？教えてください。よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css">  </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
ダブルクリックすると画像が
SafariやOperaで下記htmlの<div id="outer"></div>の部分をダブルクリックすると画像が全体的に青くなるのですがダブルクリックしても青くならないようにするにはどうすればいいのでしょうか <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #outer { position: absolute; background-color: #FF33CC; width:280px; height:280px; } </style> </head> <body> <img src="./tes1t.jpg" alt=""> <div id="outer"></div> </body> </html>
- 締切済み
- CSS

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

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