レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
Post on:2020年4月27日
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。
完全無料で利用でき、登録など面倒なことは一切不要です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020042601-03.png)
everysizeの特徴
everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。
ブラウザベースのオンラインツールなので、OSを問わず利用できます。
Chrome, Safari, Edgeは問題なし、IE11はダメでした。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020042601-08.png)
everysizeの使い方
everysizeの使い方は簡単で、ブラウザでアクセスするだけです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020042601-01.png)
アクセスしたら、ページ上部に表示したいページのURLを入力します。
![上部に表示したいページのURLを入力](http://coliss.com/wp-content/uploads-202002/2020042601-02.png)
上部に表示したいページのURLを入力
デフォルトで、iOSとAndroid、Bootstrapのサイズが利用できます。
![さまざまなデバイスのサイズで表示](http://coliss.com/wp-content/uploads-202002/2020042601-03.png)
さまざまなデバイスのサイズで表示
ズーム機能を使用して、必要なすべてのサイズを1ページに収めることもできます。
![ズーム機能](http://coliss.com/wp-content/uploads-202002/2020042601-04.png)
ズーム機能
逆にスマホ表示だけを大きくしたい、というのもできます。
![スマホ表示だけを大きく](http://coliss.com/wp-content/uploads-202002/2020042601-05.png)
スマホ表示だけを大きく
レイアウトをドラッグ&ドロップで変更できるのもいいですね。
![レイアウトの変更](http://coliss.com/wp-content/uploads-202002/2020042601-06.png)
レイアウトの変更
sponsors