当Webサイト内、Web制作&システム開発サイトの制作実績ページで表示しているWebページのサムネイル。当初はサムネイル自動生成ツールを使用していました。その後、半年前から各々の制作実績のページでレスポンシブ Web デザインによる PC、タブレット、スマホそれぞれの画面を表示するようにしたのですが、サムネイル自動生成ツールではPC画面を縮小して取得することしかできず。仕方なく、それぞれのスクリーンショットを撮って貼り付けてました。

しかし、新しいサイトを追加する度に3種類のスクリーンショットを撮る必要がありますし、時が経つとスクリーンショットが古くなるので定期的に撮り直す必要があり。そこで、少々強引ですが、Webページそのものの PC、タブレット、スマホそれぞれのサイズの画面を、インラインフレーム（ iframe タグ）で埋め込んで表示することにしました。

ただ、それぞれのサイズのWebページをサムネイルのように縮小表示する必要があり、更にレスポンシブにも対応させる必要がありました。

“iframe でWebページを埋め込んで縮小表示する（レスポンシブ対応）” の続きを読む »