Web Service

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

レスポンシブWebデザインを制作する上で役立つ表示確認ツール「Respondr」をご紹介します。主にiPhone・iPad・Macでの表示を確認することができます。使い方もURLを入れるだけなのでとても簡単です。

[ads_center]

Respondrの使い方

Respondr

Respondr | Responsive Design Test Suite

使い方はURLを入れてGoボタンをクリックするだけです。こんな感じで簡単にチェックすることができます。iPhoneの場合はiPhone4と5の2種類で確認することができます。

iPhoneでの表示確認

iPadでの表示もこの通り。実機に表示されるようなデザインになっているのでとてもリアルに近い感じで確認できるところがいいですね。

iPadでの表示確認

最後にMacでの確認。

Macでの表示確認

確認できるサイズ設定は多くはないですが、とりあえずiPhoneやiPadでの表示をサクッと確認しておきたい時なんかに役立つかと思います。この手のツールは多いに越した事はないので、自分なりに棲み分けして使っていきたいですね。

Image Lightboxレスポンシブ&タッチフレンドリーなギャラリーのjQueryプラグイン「Image Lightbox」前のページ

CSS3を使ってアニメーションするツールチップを実装するコード次のページCSS3を使ったツールチップ

関連記事

  1. CSS Color Chart

    Web Service

    CSSのカラーネーム、HEX、RGBを1クリックでコピーできるカラーチャート「CSS Color C…

    CSS Color Chartがとても便利だったのでご紹介します。とて…

  2. CSS3 Box Shadow Generator
  3. Web Service

    JavaScriptのソースコードを1クリックで簡単に圧縮してくれる「/packer/」を使ってみた…

    JavaScriptのコードを1クリックで簡単に圧縮してくれる便利なツ…

  4. Web Service

    iPhoneでWikipediaを調べるためのアプリ「Wikiamo」が便利すぎる

    最近色々調べものをする機会が多くて、何かiPhoneで便利なアプリでも…

  5. Flat UI Colors

    Web Service

    フラットデザインに合う配色のカラーコードを取得できる「Flat UI Colors」

    流行のフラットデザインに合う配色を集めたツール「Flat UI Col…

  6. HTML特殊文字変換ツール

    Web Service

    テキスト内のHTML特殊文字を変換してくれる便利なツール

    テキスト内にあるHTML特殊文字を変換してくれる便利なツールがあったの…

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP