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

    CSSでBorder Radiusだけのコードを生成してくれるジェネレーター「CSS Border …

    CSSでBorder Radiusだけのコードを生成してくれるジェネレ…

  2. Web Service

    文字はいらない!Webサイトを画像だけで楽しむことができるブックマークレット「Wordless We…

    おもしろいブックマークレットがあったのでご紹介します。Webサイト上に…

  3. Web Service

    右クリックでキャッシュ、クッキー、履歴を消すことができるChrome拡張機能「Clear」

    Chrome拡張機能「Clear」というのがとても便利そうだったので入…

  4. Web Service

    かっこいいボタンやフォーム、かわいいリボンなんかが作れるCSSジェネレーター「Live Tools」…

    とても簡単にかっこいいボタンやフォームが作れちゃうCSSジェネレーター…

  5. Web Service

    自由なサイズやカラー指定でダミー画像を生成できる「PLACEHOLD.IT」

    PLACEHOLD.ITはWeb製作に役立つダミー画像を生成してくれる…

  6. Web Service

    Mac版Pocketがリリースされたのでさっそく使ってみた!

    あとで読むサービスのPocketがMacのアプリでついに登場していたの…

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP