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

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

Posted at September 25,2012 1:33 AM
Tag:[Extension, GoogleChrome]

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

Resizer

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

それがこの「Resizer」です。

1.「レスポンシブWebデザイン」とは

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

2.インストール

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

「Resizer」のページ

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

ダイアログ

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

インストール完了

3.「Resizer」の使い方

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

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

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

「Resizer」アイコン

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

「Resizer」が起動

3.サイズの変更

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

サイズの変更

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

Small Tablet

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

Toggle Orientation

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

デバイスの切り替え

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

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

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)