Screenqueri.es

Web Service

ブラウザ上でレスポンシブWebデザインを確認することができるツール「Screenqueri.es」

ブラウザ上でレスポンシブWebデザインを確認することができる便利なツール「Screenqueri.es」を使ってみました。iPhoneやiPadはもちろん、SAMSUNG、HTC、BLACKBERRY、LGなど色々なデバイスの確認がとても簡単にできます。レスポンシブなデザインを作成する時に役立ちそうですね。

[ads_center]

使い方

画面上にある「Enter URL」の欄に確認したいサイトのURLを入力して「View」をクリックするだけでOKです。とても気軽に確認できます。

Screenqueri.esの使い方

実際に確認してみると、こんな感じです。

実際に確認

スマートフォンやタブレットのアイコンをクリックすると、たくさんのデバイスの中から選択することが可能です。任意のデバイスをクリックするだけで、そのデバイスに合う表示サイズに切り替わります。

↓ スマートフォン

各スマートフォンのデバイス

↓ タブレット

各タブレットのデバイス

「Rotate」をクリックすると、縦と横の向きを切り替えることができます。

縦と横の向きを切り替える

「Save」をクリックすると、自分の確認したページを保存することができます。再度、確認したい時なんかに良いですね。

このように、ブラウザ上で様々なデバイスでの表示を瞬時に確認できるのが最大の利点ですね。レスポンシブで作成する時には覚えておきたいツールです。

関連記事

  1. Web Service

    数多くのUIエレメントを検索することができる「UICloud」

    たくさんのUIエレメントを検索することができる「UICloud」がとて…

  2. Web Service

    CSSで簡単に三角形を作ってくれるChrome拡張機能「CSS三角形作成ツール」

    ちょっと面白かったのでご紹介します。Chromeの拡張機能で、CSSで…

  3. Web Service

    送信と受信ができて60分だけ使用可能な使い捨てメールアドレス「GuerrillaMail.com」

    ちょっと便利そうだったのでメモしときます。送信と受信ができて60分だけ…

  4. Web Service

    iPhoneアプリのRead it LaterがPocketにリニューアルしたので使ってみたらヤバか…

    ふと、iPhoneを弄っていたらアップデートできるアプリがあったのでし…

  5. Web Service

    iPhoneからWordPressの投稿や固定ページ編集、コメント承認もできるアプリ「WordPre…

    前回iPhoneからWordPressの記事を投稿、編集できるアプリ「…

  6. CSSViewer

    Web Service

    マウスを乗せた場所のCSSコードを気軽に確認することができるChrome拡張機能「CSSViewer…

    とても便利そうだったので使ってみました。マウスを乗せた場所のCSSコー…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP