コンテンツへスキップ

デモに最適。Webサイトをサムネイル表示する

by : 2017/06/29

Webアプリケーションの機能デモなどを一覧で表示する際にはスクリーンショットを使うのが一般的です。しかし画像になってしまうため、動きがあるデモであったり、クリックイベントなどがあっても今ひとつ分かりづらいのではないでしょうか。

そこでWebサイトをそのまま使ってサムネイル表示する方法が紹介されていますので、簡単に試してみたいと思います。

iframeを使う

コツとしてはiframeを使って、サムネイル化したいWebサイトをsrcに指定します。


<div class="thumbnail">
<iframe src="http://www.htmlhifive.com/ja/gallery/hr-workflow/&quot;></iframe>
</div>

view raw

index.js

hosted with ❤ by GitHub

そして、スタイル設定を使ってサイズを指定します。


.thumbnail iframe {
width: 1440px;
height: 900px;
}

view raw

index.html

hosted with ❤ by GitHub

これだけでは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;
}

view raw

index.css

hosted with ❤ by GitHub

このように指定することで25%表示になります。

操作もできる

これの面白い点としてはクリックはもちろん、小さいですが入力も行うことができるということです。

使えない場合

iframeによる埋め込みを許可していないサイトでは使えませんのでご注意ください。


Simulating Website Thumbnails using Iframes — Mediumでは他にもオンマウスで外れるぼかしをつけたり、読み込みが終わるまでは別な画像を表示するテクニックが紹介されています。なお、transform自体はIE9以降でサポートされていますので、幅広いブラウザで使える手法と言えそうです。

ぜひお試しください!

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。