TopGoogleGoogle Chrome > 2012年9月
2012年9月25日

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

September 25,2012 1:33 AM
Tag:[, ]
Permalink

レスポンシブ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なので、これから機能が拡充されていくことを期待しています。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3