iframeにはzoom属性があって、zoom属性を使ってサイトをサムネイルのように埋め込むことができた。
IEがサポートしていたはずだけれどいまはどうなったのか。と思って調べてみたら、html5のtransformで実現可能なことがわかった。
スタイルだけで実現するサムネイル
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
で出来るよ。
実例を出してみよう。
div.thumbailのなかに iframe を作って、そこにスタイルを指定してみた。
div.thumbnail iframe{ border:none; width:800px; height:1200px; -webkit-transform: scale(0.33); -webkit-transform-origin: 0 0; margin:0px; padding:0px; }
transformで30%に縮小表示する。且つ、縮小表示すると中央によってしまうので縮小の始点を(0,0)に固定する。
これで、外部サイトや、HTMLファイルを縮小表示する事が可能になります。
作ってみた例
(cad5dd6e7292883f187de2d1aefde832)
分かり難いけれど、左がiframe で、右が通常コンテンツ。縮小表示したページのテキストが選択できてることが味噌ですね
デモサイトに便利かも
提案書や、納品書など、WEBページをスクリーンショットで埋め込むくらいなら、はじめから参照先のHTMLをポップアップ表示しちゃうほうが管理が楽になるので、ドキュメント作るときに活用すれば便利だと思いました。
