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」をクリックすると、自分の確認したページを保存することができます。再度、確認したい時なんかに良いですね。

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

Macで一括リネームMacで画像などのファイル名を一括リネームするために「Automator」を使ってみる前のページ

レスポンシブなデザインを瞬時に確認する為のブックマークレット「Responsive Design Bookmarklet」次のページResponsive Design Bookmarklet

関連記事

  1. ダミーテキスト作成

    Web Service

    ダミーテキストを使ってWeb制作の効率を上げよう

    Web制作をしていく上で必要になってくるのがダミーテキストですよね。あ…

  2. Web Service

    iPhoneでコピペを多用する人に便利なクリップボード履歴が分かるアプリ「Clipboard Man…

    個人的にとても便利すぎるアプリがあったのでご紹介します。iPhoneの…

  3. CSS3 Box Shadow Generator
  4. Web Service

    Macでテキストをコピーした際にプレーンテキストにしてくれるアプリ「FormatMatch」

    Macでテキストなどをコピーしてエバノートなんかに貼り付けると余計な装…

  5. Web Service

    夜フクロウで複数のTwitterアカウントを使うためのアカウント追加方法

    Twitterクライアントで人気の高い夜フクロウを使い始めました。メイ…

  6. プレーンテキストでペースト

    Web Service

    Evernoteのペースト時にリッチテキストではなくプレーンテキスト(スタイルなし)にする方法

    意外と活用するシチュエーションが多いのでメモがてらご紹介します。Eve…

コメント

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

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

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP