- ベストアンサー
iframe 内の画像を自動縮小させない方法
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
ごく簡単な例です。 何はともあれ順当にHTMLを <div id="manga1"> <ol> <li id="C1"><a href="#C2">2コマ目へ</a></li> <li id="C2"><a href="#C3">3コマ目へ</a></li> <li id="C3"><a href="#C4">4コマ目へ</a></li> <li id="C4"><a href="#C5">5コマ目へ</a></li> <li id="C5"><a href="#C6">6コマ目へ</a></li> <li id="C6"><a href="#C1">1コマ目へ</a></li> </ol> </div> のように書きます。idに数字を最初にかけない! [画像]は、Wikiの 漫画 - Wikipedia( http://ja.wikipedia.org/wiki/%E6%BC%AB%E7%94%BB ) にある画像へ進み、名前を[Petit_Sammy_eternue.jpg]に変更してimagesホルダーに保存する。 また、それぞれのコマを指定サイズで切り抜いてPetit_Sammy_eternue_1.jpg~Petit_Sammy_eternue_6.jpgとして保存しておきます。 ★リンクの画像は単なるテキストでも良いです。 [例]<li id="C1"><a href="#C2"><img src="./images/Petit_Sammy_eternue_1.jpg" width="191" height="167" alt="2コマ目へ"></a></li> ↓ <li id="C1"><a href="#C2">2コマ目へ</a></li> ※本来はサンプルのように<img>で画像を入れておくほうか良いです。速度は変わらない。 ★印刷時にはちゃんと6コマの漫画になります。(印刷プレビューで・・) ※Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力でチェック済みのウェブ標準HTML4.01strict + CSS2.1 ※タブは_に置換してあるので戻す。 <!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" media="screen"> <!-- div.section{ position:relative; top:50px;width:100%; background-color:gray; height:180px; } div#manga1{ position:absolute; top:5px; width:100%; } div#manga1 ol,div#manga1 ol li{ list-style-type:none;display:block; margin:0;padding:0; } div#manga1 ol{ width:205px;height:170px; margin:0 auto; overflow:hidden; position:relatve; background-color:white; } div#manga1 ol li{ width:100%;height:100%; } div#manga1 ol li a{ display:block; width:196px;height:167px; margin:auto; text-indent:-200px; background-image:url(./images/Petit_Sammy_eternue.jpg); } div#manga1 ol li a[href="#C2"]{width:196px;height:167px;background-position:0px 0px;} div#manga1 ol li a[href="#C3"]{width:191px;height:167px;background-position:-196px 0px;} div#manga1 ol li a[href="#C4"]{width:195px;height:167px;background-position:-2px -165px} div#manga1 ol li a[href="#C5"]{width:191px;height:169px;background-position:-199px -166px;} div#manga1 ol li a[href="#C6"]{width:204px;height:169:px;background-position:0px -331px;} div#manga1 ol li a[href="#C1"]{width:185px;height:165px;background-position:-202px -335px;} --> _</style> <style type="text/css" media="print"> <!-- div#manga1 ol,div#manga1 ol li{ list-style-type:none; margin:0;padding:0; } div#manga1 ol{ width:400px; } div#manga1 ol li{float:left; } --> </style> </head> <body> _<div class="header"> __<h1>タイトル</h1> __<p>このページでは・・・・</p> _</div> _<div class="section"> __<h2>見出し</h2> __<div id="manga1"> ___<ol> ____<li id="C1"><a href="#C2"><img src="./images/Petit_Sammy_eternue_1.jpg" width="196" height="167" alt="は"></a></li> ____<li id="C2"><a href="#C3"><img src="./images/Petit_Sammy_eternue_2.jpg" width="191" height="167" alt="はあ"></a></li> ____<li id="C3"><a href="#C4"><img src="./images/Petit_Sammy_eternue_3.jpg" width="195" height="167" alt="はあ~"></a></li> ____<li id="C4"><a href="#C5"><img src="./images/Petit_Sammy_eternue_4.jpg" width="191" height="169" alt="はあ~く"></a></li> ____<li id="C5"><a href="#C6"><img src="./images/Petit_Sammy_eternue_5.jpg" width="204" height="169" alt="はあ~くしょん"></a></li> ____<li id="C6"><a href="#C1"><img src="./images/Petit_Sammy_eternue_6.jpg" width="185" height="165" alt="・・・・"></a></li> ___</ol> __</div> _</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> _</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、iframeは、他のページをブラウザで開くという動作とまったく同じことであることを理解して使わなければ・・・ ⇒16.5 行内フレーム: IFRAME要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#h-16.5 ) HTML4.01では非推奨ですが・・ >CSSを用いる方法でも構いませんので、 それも原理的に無理です。 なぜなら、そのページ画像をブラウザで開いてブラウザの幅が狭いと縮小されるのですからね。呼び出し先がHTMLでしたらそうはなりません。 そもそも、iframeをそのような目的で使用するのが間違っています。!!! >画像の一部分だけを紙芝居のように見せるためにフレームのサイズを限定しています。 その場合は、objectかimg要素を使用するべきです。 また、単にDIVなどを使用して背景として表示させても良い。 一枚の画像の一部を見せるのですから、都度読み込むことに比較して、表示はとても速いです。
- Heuchler
- ベストアンサー率80% (4/5)
例に挙げられたのは、フレームを100x100サイズに指定してフレームサイズをユーザーが変更できないようにし フレーム内に**.jpgを表示するという記述ですが(resizeの初期値はnoneです) これは原寸表示ではないのですか?スクロールで全体見れますよね? フレームサイズを変更させないようにして、フレームサイズより大きい画像を表示しますと画像の一部分だけが表示されます やりたいことがいまいち伝わりません imgタグで画像サイズを指定するだとかしないと縮小はされないと思いますが フレームサイズを画像サイズに合わせたいということでしょうか?
関連するQ&A
- iframeの透過
フレーム内の背景が透けて見えるようにpng画像を使用したのですがIEでは全く透過されません(firefoxではうまく透過されます) 出来ればIE6以上で透過できるようにしたいのですがどなたか分かる方みえないでしょうか? <td height="308" colspan="8" background="背景画像.jpg"><iframe src="フレーム画像.png" width="530" height="268" scrolling="yes" frameborder="0" style=" background-color:allowTrdansparency="true"></iframe></td>
- 締切済み
- HTML
- <iframe>で読み込むページの高さを自動取得して、heigthに代入
一つ大きなフレームを <iframe name="disp" src = "" height=1000 width=1000 frameborder=0 scrolling=auto></iframe> とおいて、同一ページ内から<a href="test.html" target=disp> として、test.htmlが空白ページの<iframe>内に表示させるようにしたいのですがその都度、読み込むページの高さを自動取得して、heightとして自動的に適切な高さに変換するということはできいないでしょうか?
- ベストアンサー
- HTML
- <iframe 内のスクロール
<iframe タグを使って、JavaScript でスクロールをさせたいの ですが、 <iframe width=150 height=200 src="test.htm"></iframe> 上記これだとスクロールしてくれるのですが、 <iframe width=150 height=200 src="http;//google.co.jp"></iframe> これだとスクロールしてくれません。 JavaScript は scroll(); を使ってます。 これは自前ページだけで、既存サイトのスクロールは無理なのでしょうか。 (http: だとアンカーになって見にくいので http; にしてます)
- 締切済み
- JavaScript
- iframeについて教えてください。
ページ数が多く、一部変更するのにかなりの時間を要するので、ページ内のとある部分をフレーム対応に変更しました。 いろんなweb講座のページを見てそれらしきものを書き、一応見た目上は機能しているのですが、ちゃんとした意味がわからないので、詳しく知ってる方がいたら教えてください。 ■私が書いたもの <ILAYER CLIP="0,0,160,600" HEIGHT="600" WIDTH="160"> <LAYER HEIGHT="600" WIDTH="160" SRC="../etc/ad-love.htm"> <iframe src="../etc/info.html" name="sample" width="160" height="600" frameborder="0" scrolling=no> この部分はインラインフレームを使用しています。 </iframe> </LAYER> </LAYER> ◆縦600、横160というのを3回も書いてますが、こんなに必要なんでしょうか?本当は省略できるのに意味のない記述をしてるんでしょうか。 ◆この3回出てくる600,と300はすべて同じ部分をあらわしていますか? 例えば一番最初のはフレーム全体、次のはフレームの中の部分をあらわす、などのように微妙な違いがあるんでしょうか? わかりづらくてすみません。よろしくお願いします。
- ベストアンサー
- JavaScript
- HTMLの画像のリンクについて
ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか? 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>
- ベストアンサー
- その他(インターネット・Webサービス)
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト(waku)と、テーブルの幅を可変(パーセント表示)にしないと、画像の伸縮は難しいのでしょうか。 **** HTML部分(CSSは外部) ***** <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> **** style.css(CSS部分) ***** #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
- iframeにリンクを貼る
<iframe src="qqq.gif" height="150" width="356" align="left" frameborder="0" scrolling="no" marginheight="1" name="tv" > この部分はiframe表示です </iframe> にURLを指定してリンクを張りたいのですが、どうしたらいいですか?
- 締切済み
- HTML
- スタイルシートでフレーム枠を隙間なくピタリとつける。
よろしくおねがいします。 http://www.sonzai.net/test/test.html 参考URL↑ 中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、 下辺だけ微妙に離れてしまいます。 【HTML】 <div id="subnavibar"> <p><img src="images/top/event.png" width="220" height="50" /></p> <img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" /> <p><img src="images/top/event.png" width="220" height="20" /></p> </div> 【css】 #subnavibar { width: 240px; float: left; background-color: #ffffff; height: 100%; } 原因としては、何があるでしょうか?
- ベストアンサー
- HTML
- あるサイトにiframeが効かない
iframeを指定しても全体に表示されてしまう。urlをyahooなどに変えれば出来ているのでコーディングは大丈夫だと思います。 iframeが効かないサイト(ここでは書けませんが)があるのですが、なにか工夫をすれば、できる様になるのでしょうか。 それともiframeが効かないように意図的にサイトの方で調整されているものなのでしょうか。 宜しくお願いします。 コーディング例) <iframe src="http://www.yahoo.co.jp/" height=500 width=1000 frameborder=1 scrolling=auto></iframe>
- ベストアンサー
- HTML
補足
ご回答ありがとうございます。 画像の一部分だけを紙芝居のように見せるために フレームのサイズを限定しています。 通信速度の遅いユーザーには子供ページを表示させると 画像の描画がかなり遅れてしまうため img tag を使わずに、 iframe src から直接に画像を読ませるように 意図的にこのような工夫をしています。 resize が IE では無効であることを確認しましたので 代わりの方法をお教えいただけますよう よろしくお願いいたします。