なかちょんブログ

プログラミングとマイクラ好きな子育てパパのブログ

レスポンシブウェブデザインをブラウザ上でデバイス(width)別に確認できるサービス

   

Design shackというウエブサイトで、レスポンシブウェブデザインをブラウザ上で確認出来るサービスを3点紹介していたのでメモ。これから自分がサイトを作っていく際にwidthごとの雰囲気を確認するときにとても便利そう。localhostも確認したところ、3つとも問題無く使用できました。(Chrome)。

↓ オリジナル記事

3 Free Apps for Testing Your Responsive Designs Online | Design Shack

The Responsinator

ブラウザ上で各デバイスが縦方向にならんでいて、一度に表示を確認できる。

The Responsinator

The Responsinator

responsive.is

一見したところ、自分のサイトも確認できるようには見えないけど、右上の”GO”というフォームにサイトのURLを入力すれば希望のサイトを表示できる。一番上にデバイスのアイコンがあるので、これで切り替えを行う。ぱちぱち素早く切り替わるので、このサイトはかなり便利そう。

Responsive is  Display and present responsive web designs


Responsive.is – Display and present responsive web designs

responsivepx

widthとheightをピクセル単位で指定して表示を確認することができる。とても融通が利いて見た目もシンプル。おそらく320のサイズをじっくりつくるような時に便利そう。
Responsivepx  find that tricky breakpoint


responsivepx – find that tricky breakpoint

 - レスポンシブウェブデザイン , , ,