04_ウェブサービス 04_ウェブディレクター 07_仕事で役立つ情報 28_便利ブックマークレット

レスポンシブなサイトをサクッと確認できる便利ブックマークレット「VIEWPORT RESIZER」

レスポンシブウェブデザインで構成されているウェブサイトをサクッと確認できる便利ブックマークレットのご紹介。私のようなウェブディレクターには役立つツールですよ。

本来は実機で確認するべき動作確認ですが、毎回実機を引っ張りだしていては、非常に時間が掛かってしまいます。

かと言って、ブラウザのウインドウサイズを伸び縮みさせていては、どのタブレットやスマホでの見た目を再現できません。サイズが分かりませんからね。

そこで便利なブックマークレット「VIEWPORT RESIZER」。

ボタンひとつで、いろんなデバイスのウインドウサイズを再現できる便利ツール。登録も5秒でできるので、早速試してみましょう!

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER

ブックマークレット「VIEWPORT RESIZER

レスポンシブウェブデザインで構成されているサイトで使うと、各デバイスのウインドウサイズを擬似的に再現してくれるブックマークレット。それが「VIEWPORT RESIZER」。

まずは登録の方法について。これは簡単です。5秒で完了します。

まずは「VIEWPORT RESIZER」のサイトトップページに移動しましょう。以下のリンクからどうぞ。

トップページにある「Click or Bookmark」のボタンを、ブラウザのブックマークに登録します。ドラッグ&ドロップでブックマークバーに登録するのが一番楽でしょう。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 1

これだけで登録は完了です。

それでは次に、実際に使ってみましょう。私のブログはレスポンシブ対応なので、このブックマークレットの効果が見られます。

使うのは簡単。登録したブックマークをページ内でクリックするだけです。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 2

すると、画面上部に何やらメニューバーが表示されます。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 3

左上にあるのが、ウインドウサイズを変更するためのボタン。各デバイスのアイコンが並んでいて、クリックすると真ん中のウインドウサイズが変更されます。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 4

同じアイコンを2回クリックすると、そのデバイスのヨコのウインドウサイズで見ることができます。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 5

アイコンの右にはウインドウのサイズが表示されます。また、これをクリックすれば自分の好きなサイズに変更可能。あと、右にある「Animation」をクリックすると、ウインドウが自動で可変するようになります。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 6

あとがき

とりあえずブックマークだけしておけば、後は気になるサイトでボタンをポチッと押すだけ。非常にスピーディーにサイト確認ができるのでオススメです。

ただし、やっぱり実機での確認がベストですよ!これはあくまで模擬的に表現しているだけで、実機だと不具合が出るって事は往々にしてあり得ますから。

それでは、今日はこの辺りで。

関連キーワードからさらに見る

\ この情報をシェアしよう! /

-04_ウェブサービス, 04_ウェブディレクター, 07_仕事で役立つ情報, 28_便利ブックマークレット
-,

Copyright© あなたのスイッチを押すブログ , 2020 All Rights Reserved.