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で多彩なエフェクトをつけることができるジェネレーター「CSSPainter」

    CSSで多彩なエフェクトをつけることができるジェネレーター「CSSPa…

  2. WebGradients

    Web Service

    CSSやPNG形式に対応した180種類のグラデーションを活用できる「WebGradients」

    WebGradientsは、180種類ものグラデーションが用意されたコ…

  3. Web Service

    レスポンシブ制作に役立つiPhone・iPad・Macの表示確認ツール「Respondr」

    レスポンシブWebデザインを制作する上で役立つ表示確認ツール「Resp…

  4. Web Service

    CSSで使えるカラーネームの一覧を見やすく表示してくれる「147 Colors」

    覚えておくと便利そうだったのでメモしときます。CSSでも使える147種…

  5. Web Service

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

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

  6. Web Service

    Draftpadのアシスト機能を使えばEvernoteやDropboxはもちろん、するぷろ for …

    前々からDraftpadを入れてたんですが、ほとんど使っていませんでし…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP