ホーム WEBデザイン Chromeでデバイスごとの画面サイズチェックできるWindow Resizer。
ChromeユーザーでなおかつWEBデザイナーであれば、この機能拡張は必須でしょう。レスポンシブをチェックするのに「Window Resizer」が便利です。
スポンサーリンク
Chromeでも各種デバイスのチェックが可能だが。。。
Chromeにもデフォルトでデベロッパーツールから各種デバイスでの表示のチェックが可能ですが、表示もモタツクし操作しづらい。
![0](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/04/0.jpg?resize=640%2C550&ssl=1)
スポンサーリンク
拡張機能、Window Resizerをインストール。
そこでWindow ResizerをChromeにインストールしましょう。
まずはChromeを立ち上げ、Window Resizerのインストールのページへ。
「+CHROMEに追加」をクリック
![1](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/04/1.jpg?resize=640%2C525&ssl=1)
「Window Resizerを追加しますか?」というダイアログが出てきますので、拡張機能を追加をクリック。
![2](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/04/2.jpg?resize=640%2C525&ssl=1)
Window Resizerが追加されました。右上のWindow Resizer(NEWアイコン)をクリック。
![3](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/04/3.jpg?resize=640%2C525&ssl=1)
「BETAバージョンにトライしてみて」っつうアラートが出てきますが、無視して「OK, got it!」をクリック。
![4](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/04/4.jpg?resize=640%2C525&ssl=1)
すると各デバイスに切り替えるナビゲーションがでてきます。下の方にある「Edit presets」をクリックしてみましょう。
![5](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/04/5.jpg?resize=640%2C525&ssl=1)
ここにAdd new resolutionを追加しておくことも可能です。よく使うサイズは予め登録しておきましょう。
![6](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/04/6.jpg?resize=640%2C525&ssl=1)
スポンサーリンク
Twitter でbbpをフォローしよう!
Follow @https_bbp_jpこんな記事もあります。
コメント
プロフィール
![](https://bbp.jp/wp-content/themes/bbp/img/bbp.jpg)
bbb
はWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。