Chromeで拡張を使わずにレスポンシブデザインの確認をする2つの方法! | Select *
Web Web制作

Chromeで拡張を使わずにレスポンシブデザインの確認をする2つの方法!

chrome-responsive4オハヨウゴザイマス!
ちょっと前からレスポンシブデザインにチャレンジしている@deepblue_willです。

レスポンシブデザインの確認のために良いChrome拡張ないかなと探してたのですが、結局見つからなかったのでしばらく手動で頑張ってました。で最近、Chromeの標準機能にあることを知って泣きたくなりました。。私みたいな人がでないように今日はその機能を紹介したいと思います。

Chromeでレスポンシブデザインを確認する方法

拡張?そんなもの必要ありません。
Web開発者ならお馴染みの「デベロッパーツール」になんと、スマートデバイスの横幅に自動でしてくれる設定があるのです!

Cmd + Option + i」(WinはF12)でデベロッパーツールを開きます。
右上のアイコン(>三みたいなやつ)をクリックします
chrome-responsive

すると下にさらに画面が表示されるので、「Emulation」タブをクリックします
chrome-responsive2

Device」で好きなスマートデバイスを選択して、「Emulate」をクリックします
chrome-responsive3

最後にブラウザをリロードします
するとなんと選んだデバイスの幅で確認ができます!
chrome-responsive4

元に戻したい場合は「Emulate」の横の「Reset」をクリックです!


めんどくさがり屋のあなたに

これだけの手順を毎回やるのめんどくさい!って方は、ブックマークレットをオススメします。
ブックマークツールバーにセットしておけば、クリックするだけでレスポンシブの確認ができます!
むしろこっちの方が便利だったりします(笑)

Responsive Design Bookmarklet」にアクセスして、ブックマークレットをブックマークツールバーにドラッグ&ドロップします。
responsive-bookmarklet

あとは確認したい画面を表示した状態で、ブックマークレットを起動するだけです。
細かい横幅の指定はできない(指定は4つのみ)ので、おおまかに確認したいときはこっちの方が楽でいいかもです。
responsive-bookmarklet2

最後に

Firefoxにも標準でレスポンシブデザインの確認機能があるみたいです。
最近ではPCよりもスマートデバイスからの閲覧の方が多いので、レスポンシブデザインは扱えるようになった方がよさそうです。
まぁレスポンシブ以外にもスマートデバイスに対応する方法はありますが。。(ユーザーエージェントで切り替えるとか)

知らなかった人は是非ためしてみてください!

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)