それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

iframeで、WEBサイトのサムネイルみたいに表示する。

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をポップアップ表示しちゃうほうが管理が楽になるので、ドキュメント作るときに活用すれば便利だと思いました。

2012-09-25追記

css の zoom で出来るようです。iframeのzoomはないけど、cssにzoom がクロスブラッドでちゃんと動くって。css zoomいつの間に。。。

広告を非表示にする