小粋空間  -  a cheap joke and a play on words site

レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」

レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」を紹介します。

先日、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を投稿したところ、Chromeでも同じような機能がほしい！みたいな書き込みがあったので、探してみたら似たような拡張機能がありました。

それがこの「Resizer」です。

１．「レスポンシブWebデザイン」とは

「レスポンシブWebデザイン」については、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を参照ください。

２．インストール

「Resizer」のページ右上にある「CHROMEに追加」をクリック。

表示されたダイアログの「追加」をクリック。

これでインストールされました。

３．「Resizer」の使い方

レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。

NHKスタジオパーク（2012年9月現在のデザイン）

レスポンシブWebデザインのページを開いた状態で、「Resizer」アイコンをクリック。

右上に黒いメニューバーが表示されます。これで「Resizer」が起動しました。

３．サイズの変更

「Mobile(320x480)」の部分をクリックすると、変更デバイス名が表示されるので、いずれかを選択します。ここでは「Small Tablet」を選択します。

「Small Tablet」は次のように表示されます。サイズにはスクロールバー部分が含まれます。

「Toggle Orientation」をクリックすれば、高さと幅が切り替わります。

「+」「-」をクリックすればデバイスが切り替わります。

４．Firefoxの「レスポンシブデザインビュー」との比較

Firefoxの「レスポンシブデザインビュー」と比較すると、

• 任意のサイズに変更できない
• またディスプレイサイズを超えた部分の確認ができない

などの点から、機能的にはFirefoxの「レスポンシブデザインビュー」が勝っています。

が、本エントリー執筆時点での「Resizer」のバージョンは0.1なので、これから機能が拡充されていくことを期待しています。