デモに最適。Webサイトをサムネイル表示する
Webアプリケーションの機能デモなどを一覧で表示する際にはスクリーンショットを使うのが一般的です。しかし画像になってしまうため、動きがあるデモであったり、クリックイベントなどがあっても今ひとつ分かりづらいのではないでしょうか。
そこでWebサイトをそのまま使ってサムネイル表示する方法が紹介されていますので、簡単に試してみたいと思います。
iframeを使う
コツとしてはiframeを使って、サムネイル化したいWebサイトをsrcに指定します。
| <div class="thumbnail"> | |
| <iframe src="http://www.htmlhifive.com/ja/gallery/hr-workflow/"></iframe> | |
| </div> |
そして、スタイル設定を使ってサイズを指定します。
| .thumbnail iframe { | |
| width: 1440px; | |
| height: 900px; | |
| } |
これだけでは1440×900で表示されるだけなので、CSS3のtransformを使ってサイズを縮めます。
| .thumbnail { | |
| position: relative; | |
| -ms-zoom: 0.25; | |
| -moz-transform: scale(0.25); | |
| -moz-transform-origin: 0 0; | |
| -o-transform: scale(0.25); | |
| -o-transform-origin: 0 0; | |
| -webkit-transform: scale(0.25); | |
| -webkit-transform-origin: 0 0; | |
| } |
このように指定することで25%表示になります。
操作もできる
これの面白い点としてはクリックはもちろん、小さいですが入力も行うことができるということです。
使えない場合
iframeによる埋め込みを許可していないサイトでは使えませんのでご注意ください。
Simulating Website Thumbnails using Iframes — Mediumでは他にもオンマウスで外れるぼかしをつけたり、読み込みが終わるまでは別な画像を表示するテクニックが紹介されています。なお、transform自体はIE9以降でサポートされていますので、幅広いブラウザで使える手法と言えそうです。
ぜひお試しください！
コメントは受け付けていません。