- 締切済み
iframeタグで横幅の％指定は、ブログで使える？
「ttp://www.●●●」の画像を、以下のサイズでフレーム表示したいです。 「●●●画像の横サイズ」をＰＣの画面の横サイズの５０％、「●●●画像の縦サイズ」を「●●●画像の横サイズ」の８０％（つまり、画面の横サイズの４０％） <iframe width="50%" height="80%" src="ttp://www.●●●></iframe> ブログに、上記のプログラムを記述すると、height（縦幅）の％の数値を変えても、縦サイズは３００px程度に固定され変更になりません。 ブログでは、縦サイズの％指定はできないのでしょうか？ また、「●●●画像の縦サイズ」を「●●●画像の横サイズ」の８０％、と言う様な指定方法は出来ますか？（「●●●画像の縦サイズ」をＰＣの画面の横サイズの８０％では無い） アドバイスをよろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
先のサンプルを実行してその仕組みを理解していただかないと理解していただくのは無理です。 No.2で示したリンク先の記事を読んで理解して置いてください。 1) iframeはあくまで行内要素ですから巾を指定することは本来は出来ませんが、 display:block; width:75%; とすると、iframeを含む、static以外の抱合コンテナブロックのサイズを計算の基準に出来ます。 staticは、positionプロパティのとりうる値で、static | relative | absolute | fixed | inheritがあります。 →9.3.1 配置体系を選択する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position ) 2) 高さについては、blockは親コンテナブロックのサイズを参照しますから、ここでの指定できるのは(1)と同様親ブロックのサイズです。それがなければ、HTMLのheight属性で指定されたものがデフォルトとして利用されます。 →6.4 カスケード処理（The cascade） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade ) 3) iframeで呼び込まれたHTML内の画像については、呼び込むHTML側では一切指定できません。これは理解できると思います。No.3のサンプルを試す必要があります。 4) 読み込まれたHTML--youtubeのページの画像サイズ指定に従います。 youtubeの画像指定には、No.3で示した呼び出されるページのようなスタイルシートはありませんから、横幅にしたがって伸縮しません。実際にyoutubeのページでもウィンドウサイズを変更しても画像サイズは変わりませんね。 No.3で示した呼び出される側のHTMLは、それだけを開いたとき、ウィンドウサイズによって画像サイズが伸縮しましたよね。 あなたが、作成したページを呼び出すのでしたら、そのページをNo.3の呼び出されるHTMLのように作成しなおせば可能です。 すなわち、埋め込まれるHTMLをあなた自身が作成しなければなりません。 youtubeの動画はobjectで埋め込むことが可能ですから、iframeを使わず、objectで埋め込んでobjectをblockに変換して、width:75%;height:auto;とすれば期待通りに出来るはずです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
あなたが期待されているのはiframeのサイズなのか、画像サイズなのかわかりません。 ＞画像の縦のサイズの％指定は、使えないのではないでしょうか？ blockになった画像サイズの指定は、static以外の親になるブロックのサイズを参照します。縦横比を変えないときはheight:autoです。 html5で画像が好きなところにはれません - HTML - 教えて！goo ( http://okwave.jp/qa/q7600607.html ) でしめしたサンプルをiframeで読み込めばよいです。 ★あくまで、iframe内のHTMLは独立していますから読み込まれるHTML側で指定しないとダメですよ。 というか、このように読み込むHTMLがきちんと書かれていればわざわざ、そのHTMLにスタイルを書き加えなくても表示されるはずです。 [サンプル] 1) タブは＿に置換してありますので戻すこと。 2) 読み込むHTMLは上記( http://okwave.jp/qa/q7600607.html )のものを7600607.htmlとして読み込ませる。 3) 画像は別途用意すること 4) 色々な場所でwidthが指定してあるので、それを変更して仕組みを理解すること <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8"> ＿<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{background-color:gray;} div.header,div.section,div.footer{margin:0 auto;width:80%;background-color:silver;} div.iframe{width:90%;margin:0 auto;display:block;border:solid 1px red;position:relative;} div.iframe iframe{display:block;margin:10px auto;width:50%;border:solid green 1px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>iframeのサイズ指定</p> ＿＿<div class="iframe"> ＿＿＿<iframe src="./7600607.html" width="500" height="600"> ＿＿＿HTMLをよみこめません。 ＿＿＿</iframe> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞<iframe class="block" それはないでしょう。iframeなんてひとつのHTMLに一箇所でしょう。たとえ複数個所あったにしても、セレクタで特定できるはずです。たとえば本文中のものなら div.section div iframe{} と・・ div.dection div{width:80%;height:600px;margin:0 auto;position:relative;} div.dection div iframe{display:block;width:100%;height:100%;} とか、ブロック要素は、直近のstatic以外の親コンテナブロックのサイズを参照します。 →9.1.2 包含ブロック（Containing blocks） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#containing-block ) →9.2 ボックスの生成を制御する（Controlling box generation） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#box-gen )
お礼
再度のアドバイス有難うございます。 iframe { display: block; } 上記をＣＳＳに追加で記述しました。（ＨＴＭＬはそのまま） しかし、画像の縦のサイズは、％指定で変更になりません。 私の推測ですが、ブログでは横のサイズの指定はあります。（ＰＣ画面の横の解像度） しかし、ブログでは縦のサイズの指定は無い様に思います。 インライン要素をブロック要素に変更しても、参照するサイズが無いのだから、 画像の縦のサイズの％指定は、使えないのではないでしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
iframeは行内要素です。 →<!ELEMENT IFRAME - - (%flow;)* -- inline subwindow --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#edef-IFRAME ) →このプロパティは、非置換インライン要素には適用できない。 なぜなら、 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-width ) ブロック要素とインライン要素の違いは、HTMLにおいて、本当に重要な基礎的部分です。 ★7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 ) width属性やheight属性での指定も同様です。 ＞「●●●画像の縦サイズ」を「●●●画像の横サイズ」の８０％、と言う様な指定方法は出来ますか？ 画像は典型的な置換インライン要素ですから、試されたらお分かりのように指定できません。 スタイルシートでブロック要素に変更して、親コンテナブロックの幅を参照させましょう。
お礼
【変更前】<iframe width="50%" height="80%" src="ttp://www.●●●></iframe> 【変更後】<iframe class="block" width="50%" height="80%" src="ttp://www.●●●></iframe> .block { display: block; } （別ページのスタイルシートに左記の記述を追加） 下記のサイトを参考にして、上記の様に変更しました。 http://css.eweb-design.com/0803_ds.html 「<iframe>タグがインライン要素からブロック要素に変更になるので、上手く行く」と、私は考えました。 しかし、以前と同様に、height=の％指定は効果が有りません。 何処が間違っているのでしょうか？ 詳しい方のアドバイスをよろしくお願いします。
補足
時間をかけて、教えてくださいまして有難うございます。 お礼を書き忘れていました。 すみません。
お礼
再度のアドバイス有難うございます。 当方のＨＴＭＬの知識が未熟の為、アドバイスの意味が理解できない状況です。 ですので、もう一度始めから、具体的にお聞きしたいと思います。 <iframe width="420" height="315" src="http://www.youtube.com/embed/0gM4dWVc0fM?rel=0" frameborder="0" allowfullscreen></iframe> YouTubeのサイトで、上記の様な埋め込みコードを取得出来ます。 そして、ブログのＨＴＭＬに追記すると、ブログに動画の画面が埋め込まれます。 各人のＰＣの解像度は様々なので、画面のスクロールをしなくても良い様に、YouTube動画画面の横幅を、％指定に変更して指定しました。 そして、横幅の％指定は成功しました。 YouTube動画の縦幅は、横幅の７５％の比率です。 「ブログに埋め込まれたYouTube動画の縦幅の７５％」に、縦幅を指定する方法が分からない状況です。 具体的には、どの様にプログラムを書けば良いでしょうか？ アドバイスよろしくお願いします。