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

    黄金比を自動計算してくれる便利なツール

    サイトをデザインする時に黄金比を取り入れることによって見栄えが良くなり…

  2. Streaksで特定の曜日をスキップ

    Web Service

    継続日数をカウントできるiPhoneアプリ「Streaks」で特定の曜日をスキップさせるやり方

    普段、何か継続・習慣化させたい事がある場合にはiPhoneアプリの「S…

  3. 目覚まし時計

    Web Service

    朝起きるのに便利!Macで指定した時間にアラームを鳴らしてくれるアプリ「目覚まし時計」

    Macで目覚まし時計をセットしたくてアプリを探していたらよさそうなのが…

  4. Web Service

    ボタン1つでCSSファイルを軽量化!圧縮や整形が簡単にできる「csCSSc」

    CSSファイルを簡単に圧縮したり整形したりできるツール「csCSSc」…

  5. Web Service

    エバノートにノートリンク機能があることを知らなかったので使ってみた

    エバノートにノートリンク機能なんてのがあるみたいですね。知らなかったで…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP