デモに最適。Webサイトをサムネイル表示する
Webアプリケーションの機能デモなどを一覧で表示する際にはスクリーンショットを使うのが一般的です。しかし画像になってしまうため、動きがあるデモであったり、クリックイベントなどがあっても今ひとつ分かりづらいのではないでしょうか。
そこでWebサイトをそのまま使ってサムネイル表示する方法が紹介されていますので、簡単に試してみたいと思います。
iframeを使う
コツとしてはiframeを使って、サムネイル化したいWebサイトをsrcに指定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="thumbnail"> | |
| <iframe src="http://www.htmlhifive.com/ja/gallery/hr-workflow/"></iframe> | |
| </div> |
そして、スタイル設定を使ってサイズを指定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .thumbnail iframe { | |
| width: 1440px; | |
| height: 900px; | |
| } |
これだけでは1440×900で表示されるだけなので、CSS3のtransformを使ってサイズを縮めます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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以降でサポートされていますので、幅広いブラウザで使える手法と言えそうです。
ぜひお試しください！
hifive開発者ブログ 
コメントは受け付けていません。