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. ツイッターへの画像・動画の載せ方

    Web Service

    ツイッターへの画像・動画の載せ方(添付方法)について

    ツイッターでつぶやくときに、ただ文章のみをつぶやくだけではなく画像や動…

  2. ブラウザでストップウォッチ

    Web Service

    ブラウザで手軽にストップウォッチが利用できるサービス

    ブラウザでちょっと何かの時間を計りたい時に役立つストップウォッチのサー…

  3. Web Service

    右クリックでキャッシュ、クッキー、履歴を消すことができるChrome拡張機能「Clear」

    Chrome拡張機能「Clear」というのがとても便利そうだったので入…

  4. Web Service

    CSSで簡単に三角形を作ってくれるChrome拡張機能「CSS三角形作成ツール」

    ちょっと面白かったのでご紹介します。Chromeの拡張機能で、CSSで…

  5. Web Service

    Mac版Pocketがリリースされたのでさっそく使ってみた!

    あとで読むサービスのPocketがMacのアプリでついに登場していたの…

  6. Box Shadow

    Web Service

    CSSでボックスシャドウを作成してくれるジェネレーター「Box Shadow」

    CSSでボックスシャドウを簡単に作成できるジェネレーター「Box Sh…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP