ホームページを作る人のネタ帳

レスポンシブWebデザインのデザインテスターChromeエクステンション

Chrome拡張
ポチッとするだけでレスポンシブWebデザインのプレビューができるので便利なChrome拡張です。

レスポンシブWeb デザインテスター


Responsive Web Design Tester - Chrome ウェブストア

アイコンが追加されまして
追加アイコン

クリックするとセレクト画面が展開。
セレクト画面

例えばクリエイターボックスのブログ
クリエイターボックスの場合

iPhone5で見ると・・・。
iPhone5

いろいろ追加できる


オプションを選択すると自分で好みのサイズが追加出来ます。
オプション拡張
サイズの追加や変更などが行えます。
設定画面

物足りんって人


Chromeエクステンションは、ぱぱぱっとやれてぱぱっと確認するためのものなので、マルチデバイス時代にこんなものでは足りんということであれば、結局ChromeのDeveloperToolを使ったほうが早かったりなんだりします。

GoogleChromeのDeveloperToolは、『 Ctrl+Shift+Iキー 』で起動します。
DeveloperTool
右サイド、もしくはフッター付近に現れます。この表示位置は以下のボタンで切り替え可能。
表示位置変更
そんでマルチデバイステスターとしては以下のボタン。
マルチデバイステスター
スマホ表示に。
DeveloperTool
タブレット用に。
タブレット表示
個人的にはさくっと見れればどっちでもいんですけね。

お好きな方を。

それでは、また。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply