レスポンシブデザインの簡単な確認方法

160件のシェア(すこし話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

レスポンシブデザインのテストツール

Webサイトへアクセスするデバイスは、スマートフォン、タブレット、PCなど、非常に多様化してきており、
レスポンシブWebデザインが重要になってきています。
対応デバイスが増えるということは、それに伴ってテストも大変になるということです。

そこで今回は、Webサイト作成の際に「iPad2だとどう見えるんだろう」といったケースで簡単に確認できるツール、
designmodo.com/responsive-testを紹介します。

使い方は簡単です。ここへアクセスし、
画面上部のテキストボックスに、対象のURLを記述しましょう。(http://localhostとかでもOK)
そして、画面右のドロップダウンメニューから「iPad」とか「15" Macbook Pro」とかの対象デバイスを選択すれば、
そのデバイスでどう見えるか確認することができます。
responsive

また、確認したいデバイスがメニューに載っていない場合でも、自分でサイズ入力すれば表示することが可能です。

参考サイトなど