[code] iframeの拡大縮小
インラインフレーム内のコンテンツを縮小表示する
2017.11.09 Thursday 23:58
htmlを書いていて思うことがあります。インラインフレーム内に入れ子にしたコンテンツを「縮小してサムネイルのようにしたい」と。ところが、これは一筋縄では行かなくてなかなか苦戦します。デスクトップだけではなく、iPhoneなどのスマホにも対応しようと思うと大変。そんな中、試行錯誤の末、ひとつの着地点を見出したのでメモ。が今回のお題目。
＜まえおき＞
例によって例のごとく、筆者は何の責任も負わないのでそのつもりで。
＜結果＞
上のようになりました。このインライン部分のソースの記述は、下のようになっています。
<div style="width:100%;overflow:scroll;-webkit-overflow-scrolling:touch;border:solid 1px;">
<iframe height="600" name="sample" src="https://docs.google.com/spreadsheets/d/1GvSM8GOd1eFs6wXN2pzfF4k9v3Esxr5NILFkhEJBNcA/edit?usp=sharing" style="transform:scale(0.5);-moz-transform:scale(0.5);-webkit-transform:scale(0.5);-o-transform:scale(0.5);-ms-transform:scale(0.5);transform-origin:0 0;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;border:solid 1px;margin-bottom:-300px;margin-right:-100%;width:200%;">この部分はインラインフレームを使用しています。
</iframe>
</div>
肝心なのは、
紫色の文字：ググると多く散見される部分で、インラインフレーム内を「0.5」に縮小(つまり50%)し、起点を左上にする。iPhoneなども含めた多くのブラウザに対応するために各記述を並べる。
緑色の文字：iPhoneなどでスクロールを可能にする。
iframeタグをdivタグで囲ってやる。
赤色の文字：囲んだdivタグで、横幅を100%にしてやらないと、入れ子にするコンテンツが表示領域の横幅をはみ出る場合、右側に余白が生まれて意味のない横スクロールが発生する。
青色の文字：iframeタグで縦を指定した数値の半分を、下部のマージンでマイナスしてやる事によって、余計な余白を消す。
橙色の太文字：入れ子のコンテンツは元の50%に縮小しているので、元の倍の「200%」にしてやる事によって、内容は縮小されたまま表示領域の横幅一杯に表示される。そして、横幅「100%」を、右側のマージンでマイナスしてやる事によって、無駄な余白を消す。という内容。
アトリエ・トリガ (旧館)
http://scrappocket.mac-in.net/?eid=92#gsc.tab=0
悲しいことに、iframeの横幅・縦幅が0.55倍になるだけでiframe内のコンテンツが縮小されるわけではないのです。Firefoxなどのブラウザでは、そもそもzoomすらされていない状態になります。
また、iOSではそもそもiframeの幅指定を無視します。ではどうすればよいのでしょうか？答えとしては、CSS3が解釈できるブラウザ限定にはなりますがCSS3のtransformを使えばいいのです。
💻HTML
transform:scale(0.55)<br> <iframe src="http://blog.asial.co.jp" frameborder="1" width="1090" height="1090" style="transform:scale(0.55);-o-transform:scale(0.55);-webkit-transform:scale(0.55);-moz-transform:scale(0.55);-ms-transform:scale(0.55);"></iframe>
transform:scale(0.55)
こうなります。でもまだおかしいのです。上下左右にマージンがあります。これは意図した物ではありません、tranformの起点がコンテンツの真ん中にあるためです。これを補正するために、スタイルを追加します。
💻HTML
<iframe src="http://blog.asial.co.jp" frameborder="1" width="1090" height="1090" style="transform:scale(0.55);-o-transform:scale(0.55);-webkit-transform:scale(0.55);-moz-transform:scale(0.55);-ms-transform:scale(0.55);transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;"></iframe>
transform:scale(0.55);transform-origin:0 0;
これでtranformの起点が左上になるので、意図したとおりの表示になりました。後は、横方向にスクロールバーが出ているのが気になるのと、まだiframeの右側と下側に大きくマージンが出来てしまっているので、これを隠して上げる必要があります。transformの起点は左上になりましたが、コンテンツサイズは元のままとなっているためです。
HTML
<div style="width:600px;height:600px;overflow-x:hidden;border:1px solid #999"> <div style="width:600px;height:3081px;overflow:hidden;">
<iframe src="http://blog.asial.co.jp" frameborder="0" scrolling="no" width="1090" height="5603" style="transform:scale(0.55);-o-transform:scale(0.55);-webkit-transform:scale(0.55);-moz-transform:scale(0.55);-ms-transform:scale(0.55);transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;"></iframe> </div> </div>
二つほどdivの入れ子をする必要があります。
最初のdivは、実際の表示エリアになります、ボーダーと縦方向のスクロールを設定します。
2つめのdivは、コンテンツの高さを決めます、5603/0.55=3081pxです。スクロールなしに設定します。最後にiframeとして、ボーダーなし、スクロールなし、高さと幅をコンテンツサイズとして、transformです。
最後にどういったときにこれを使うのかというと、WEBアプリなどで、外部サイトだがアプリの一部として表示させたい、などといったときに使えるかと思います。基本的にCSS3が使えるブラウザであれば、動作するはずですが、Androidの場合、端末によって、WebViewで動作しないことがあるようです。
※初出時に、ベンダープリフィクスを書いていなかったので追記しています。
固定幅レイアウトのページをウィンドウサイズでピッタリ表示させる
例えば、このアシアルブログをウィンドウサイズ600pxのときでも、スクロールを出さずに、コンテンツサイズを縮小させて表示させたい、と思ったとき、どうすればよいでしょうか。まず思いつくのは、cssのzoomを使って、縮小してみる方法です。アシアルブログの横幅は1090pxとなっているので、600/1090=0.55となるので、0.55倍するとピッタリ表示されるはずです。そうです、iframeのときと要領は同じです。ですが、cssのzoomを使うだけではなく、viewportやjavaScript(jQuery)を駆使する必要があります。なお、対応ブラウザは、Chrome、Mobile Chrome、Safari、Mobile Safari、Firefox、IE9～11です。
IE8にも対応させたいのですが、うまい方法が見つかっていません。MsFilterが動作すればいいのですが、何故かうまいこといきません。いい方法があれば、教えてもらえると大変嬉しいです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>アシアルブログ</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> // UA判定用 var userAgent = window.navigator.userAgent.toLowerCase(); var appVersion = window.navigator.appVersion.toLowerCase(); // ロード・リサイズ時に画面最適化 $(window).bind("load resize", function(){ var width = $(window).width(); $("html").css("zoom" , width/1090); if (appVersion.indexOf("msie 9.") != -1) { $("html").css("-ms-transform" , "scale(" + width/1090 + ")").css("-ms-transform-origin" , "0 0"); $("body").css("overflow-x" , "hidden"); } else if (userAgent.indexOf('gecko') != -1) { $("html").css("-moz-transform" , "scale(" + width/1090 + ")").css("-moz-transform-origin" , "0 0"); $("body").css("overflow-x" , "hidden"); } }); </script> <style> /* IE用viewport */ @-ms-viewport {width: 1090px;} /* common */ html,body {margin:0;padding:0} </style> </head> <body> <a href="https://www.asial.co.jpblog.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpblog.jpg"></a> </body> </html>
アシアル
https://blog.asial.co.jp/1314/
埋め込んだiframeのサイズを調整
transformで拡大縮小
Amazonアソシエイトのバナーをなんちゃってレスポンシブ対応させたけれど、設置する場所の親要素にピタリと収まるサイズがなかった。
小さすぎるか、ちょっと大きい。
小さいバナーはまあ我慢するとして、ちょっと大きいバナーは設置してはみ出した部分を「overflow: hidden;」としてお茶を濁した。しかし、どうも気持ち悪い。バナーのデザインによってはトリミングしたことで情報が伝わりにくくなることもある。バナーサイズに合わせてサイトのレイアウトを決めてしまえばいいのかもしれないけれど、そのサイズのバナーが作られないこともあるし、そうなったら腹立たしいことこの上ない。いろいろ考えてiframeの埋め込み元の要素を埋め込み先で調整しようと思ったけれど、それはできない。ということで、「transform: scale();」を使用して全体を縮小させるという、シンプルかつ強引な方法で解決した。
💻
iframe { transform: scale(0.984375); transform-origin: 0 0;}
view rawiframe-transform.css hosted with ❤ by GitHub
iframeを埋め込む親要素のサイズは620px。iframeの中にある画像のサイズは640px。比率を保ったまま縮小したいので、縮小率は「620 / 640 = 0.96875」。
「transform-origin: 0 0;」は縮小する際の基準点。この場合は左上を基点にしている。「transform: scale(calc(100% / 640px));」みたいなことができたら真のレスポンシブ対応ができそうだけれど、それはできなかった。「scale」の値は0〜1じゃないとダメらしい。残念。この記事がお役に立ったらうれしいです。当サイトをサポートしてあなたも良い気分になりましょう。
Tips2019年3月6日
2019.3.6 WedUpdate：2022.2.18
Text by pushman
Heartfield
https://blog.heartfield-web.com/tips/iframe-transform-scale.html#gsc.tab=0
インラインフレームに表示したコンテンツを拡大縮小表示する方法
投稿者: system | 2014年8月18日
今回はインラインフレーム(以降iframe)に表示したコンテンツをCSSで変形させる方法を紹介します。使用するプロパティはCSS3で追加された「transform」というものです。transformはタグに対して様々な変形を適用する事ができるプロパティです。主に変形、移動、縮尺、回転、傾斜を適用する事ができます。iframeにも適用する事ができ、下のiframeのように変わった見せ方ができます。上のiframeにはtransformの縮小と傾斜を適用しています。Flashなどのコンテンツも変形された状態で動いて表示されます。iframeには具体的に下記のプロパティが適用されています。
transform:scale(0.5) skew(10deg, 0deg);
-moz-transform:scale(0.5) skew(10deg, 0deg);
-webkit-transform:scale(0.5) skew(10deg, 0deg);
-o-transform:scale(0.5) skew(10deg, 0deg);
-ms-transform:scale(0.5) skew(10deg, 0deg);
「scale(0.5)」の部分が縮尺を0.5倍に、「skew(10deg, 0deg)」はX軸に対して10度傾斜させるという指定です。現在はまだベンダープレフィックスが必要ですが、主要ブラウザは実装が完了しているようで、近いうちに外れると思われます。Firefoxなどは既にベンダープレフィックスが外れているようです。
ヴィンテージ
https://vintage.ne.jp/blog/2014/08/331
