2014.11.07
design

ブラウザでレスポンシブサイトのデザインを確認できるサービス

レスポンシブのウェブサイトを作成するときに、手元のiphoneやスマホ、タブレットなどの画面をいちいち確認しながら、もしくはブラウザのサイズを大きくしたり小さくしたりしながらデザインを進めるのはとっても面倒です。

そんなときに便利なサイトを紹介します。
ブラウザで簡単に確認でき、しかも主なデバイスサイズの一覧として表示されるのでウェブ制作効率化に役立ちますね。

こちらです。

web_screenshot064

使い方

英語のサイトですが、使い方も簡単です。

サイト上部のテキストフィールド(Test your own site… type the url and hit enterと書いてある部分)に、レスポンシブ表示を調べたいウェブサイトのURLを入力してキーボードのENTERを押すだけです。

左側にラジオボタンでWidth onlyDevic sizesの選択肢があります。

Width only

Widthが240px、320px、48px0、768px、1024pxの5種類のサイズに合わせてウェブサイトが表示されます。

Device sizes

240 x 320 (small phone)、320 x 480 (iPhone)、480 x 640 (small tablet)、768 x 1024 (iPad – Portrait)、1024 x 768 (iPad – Landscape)の5種類のサイズに合わせてウェブサイトが表示されます。

上記のサービスはオンラインなので作成したファイル(HTMLやCSSなど)がオンライン上にあることが必須ですが、ウェブサイト作成時には重宝しそうです。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP