MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. Web開発
  3. レスポンシブ・ウェブデザイン時代の表示チェックツールの決定版「Viewport Resizer」を使ってみた

レスポンシブ・ウェブデザイン時代の表示チェックツールの決定版「Viewport Resizer」を使ってみた

ツイート
このエントリーをはてなブックマークに追加

レスポンシブなサイトの表示確認用ブックマークレット「Viewport Resirzer」を使ってみました。先に感想を書かせてもらうと、「こりゃあ便利だ!!!」って感じです。では、早速使い方を見ていきましょう。

「Viewport Resizer」ブックマークレットを登録しよう

まずはサイトにアクセス!


まずとにかく、サイトにアクセスしましょう。ぶっちゃけアクセスしなくてもブックマークレットは準備できるんですが、そんなひねくれた事はせずに素直にアクセスしましょう。

ページをブックマーク登録しよう


開いたページをブックマーク登録しましょう。あとで分かりやすいようにブックマーク名は「Viewport Resizer」とします。

リンクをコピーしよう


Viewport Resizerのサイト上のボタンのリンクに設定されているJavaScriptをコピーしましょう。コピーしに行くのが面倒だって人は以下をコピーしてくださいね。

javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return%20false;d.write('<!DOCTYPE%20HTML><html%20style="opacity:0;"><head><meta%20charset="utf-8"/></head><body><a%20data-viewport="320x480"%20data-icon="mobile">Mobile%20(e.g.%20Apple%20iPhone)</a><a%20data-viewport="320x568"%20data-icon="mobile"%20data-version="5">Apple%20iPhone%205</a><a%20data-viewport="600x800"%20data-icon="small-tablet">Small%20Tablet</a><a%20data-viewport="768x1024"%20data-icon="tablet">Tablet%20(e.g.%20Apple%20iPad%202-3rd,%20mini)</a><a%20data-viewport="1280x800"%20data-icon="notebook">Widescreen</a><script%20src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document));

先ほど登録したブックマークのURLを変更しよう


登録したブックマークのURLを今コピーしたJavaScriptに変更しましょう。これで「Viewport Resizer」のブックマークレット準備完了です!

Viewport Resizerを使ってみよう


早速使ってみましょう。使い方は非常に簡単。レスポンシブなサイトを開いて、ブックマークレットをクリックするだけです。僕のブログで試してみてくださいね。

チェックしたいサイズを選択しよう


ブックマークレットをクリックすると上部にメニューが出てきます。クリックするだけで、様々なサイズでの表示を確認することができます。

Mobile (e.g. Apple iPhone) 320×480 – 2:3 – Portrait


iPhoneのportrait表示です。

Mobile (e.g. Apple iPhone) 480×320 – 3:2 – Landscape


同じメニューをもう一度クリックするとorientationが変更できます。iPhoneのlandscapeも可能です。

Apple iPhone 5 320×568 – 40:71 – Portrait


iPhone5のディスプレイサイズ対応してますよ!

Small Tablet 600×800 – 3:4 – Portrai

Tablet (e.g. Apple iPad 2-3rd, mini) 768×1024 – 3:4 – Portrait

Widescreen 1280×800 – 8:5 – Landscape

上記サイズ以外にもカスタムでサイズを指定することも可能です。これからどんどん増えていくであろうレスポンシブ・ウェブデザインのサイト開発時の表示チェックツールとして大いに役立つこと間違いなしですね。

もし、この記事が役に立ったらシェアしてくださいね!

ツイート
このエントリーをはてなブックマークに追加

RECOMMEND BOOKS 筆者オススメ!! この記事に関連する書籍一覧

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

こもりまさあき

現段階でレスポンシブWebデザインの唯一の指標となる書籍といっても過言ではありません。モバイルファーストやFluid ImageなどレスポンシブWebデザインには欠かせない情報がほぼ網羅されています。

¥2,625(税込)

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

松田 直樹、宮山 純

当ブログ管理人の宮山が初めて執筆に参加した書籍。実際の制作の現場で培ったノウハウや、スマートフォンサイトの設計・デザインのポイント、サイトの軽量化など、充実した内容になったかなと思います。レビューを頂ける場合は甘口でお願いします。

¥2,625(税込)

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

谷拓樹

iOSに特化したスマホサイト制作ガイド。実際の内容はAndroidでも使える内容も豊富なので、スマホサイトを制作する上で読んでおいて損はなし。

¥2,310(税込)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

たにぐちまこと

スマートフォンサイト制作における入門本。スマホサイト制作において大事な設計から基本的なマークアップ、応用まで盛り込まれているので入門本として最適な本。

¥2,499(税込)