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

    iPhoneの画像編集アプリ「Filterstorm」を使ってみた

    面白そうだったので使ってみました。iPhoneで画像編集なんてあんまり…

  2. Web Service

    2ちゃんねるまとめブログのまとめを手軽に見ることができるChrome拡張機能「2ちゃんねるまとめ」

    2ちゃんねるまとめブログのまとめをChrome画面から手軽に見る事がで…

  3. Show Title Tag

    Web Service

    Webページの長いタイトルを画面隅っこに表示させることができるChrome拡張機能「Show Tit…

    Webページを見ている時にタイトルを確認したい時ってありますよね。Ch…

  4. Unsplash It

    Web Service

    かっこいいダミー画像を読み込めるWebサービス「Unsplash It」

    Unsplash Itは、かっこいいダミー画像を手軽に読み込むことがで…

  5. JTF日本語スタイルチェッカー

    Web Service

    日本語の文章を手軽にチェックできる「JTF日本語スタイルチェッカー」

    JTF日本語スタイルチェッカーは日本語の文章を手軽にチェックすることが…

  6. Web Service

    あとで読む「Readability」にChrome/iPhone/Reederなどから簡単に情報を送…

    前から気になっていた、iPhoneアプリのReadabilityをよう…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP