Responsive Design Bookmarklet

Web Service

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

シンプルですが、かなり便利なブックマークレットを見つけたのでご紹介します。レスポンシブなデザインを確認したい時に役立つ「Responsive Design Bookmarklet」です。確認したいページを開いている状態から瞬時に確認することができるので、とても手軽に使えるかと思います。

[ads_center]

ブラウザのブックマークから使える

「Responsive Design Bookmarklet」のサイトにアクセスして、「RWD Bookmarklet」というボタンをブラウザのブックマークバーにドラッグして追加します。

Responsive Design Bookmarkletの使い方

あとは、確認したいページを開いた状態で、先程の追加したブックマークをクリックします。すると、こんな感じで瞬時に確認画面に切り替わります。

瞬時に確認

iPadとiPhoneの縦横の表示で確認することができます。具体的なサイズは以下。

  • iPad(横): 1024×768
  • iPad(縦): 768×1024
  • iPhone(横): 480×320
  • iPhone(縦): 320×480

画面の上にある各アイコンをクリックすることで、これらのサイズを切り替えることができます。

各アイコンで表示サイズ切り替え

電卓のようなアイコンをクリックすると、キーボードが表示されます。

キーボードを表示

ということで、ブックマークバーから瞬時にレスポンシブなデザインを確認できるブックマークレット「Responsive Design Bookmarklet」についてでした。

他のレスポンシブ確認ツールとしては、以下もオススメです。

関連記事

  1. Web Service

    Google検索結果で1年以内のものに限定してくれるChrome拡張機能「ato-ichinen」

    Chromeの拡張機能「ato-ichinen」を使ってみました。これ…

  2. Pocketのショートカットキー

    Web Service

    Pocket(Macアプリ・Webブラウザ)で便利なショートカットキー

    あとで読むサービスでお馴染みのPockeで日頃からよく使う便利なショー…

  3. Web Service

    iPhoneの人気のカメラアプリ「プロカメラ」がすごくよかったのでその基本的な使い方

    iPhoneアプリで人気の高いカメラアプリ「プロカメラ」を使ってみまし…

  4. Web Service

    文字はいらない!Webサイトを画像だけで楽しむことができるブックマークレット「Wordless We…

    おもしろいブックマークレットがあったのでご紹介します。Webサイト上に…

  5. Web Service

    話題のiPhoneのTODO管理アプリ「Clear」を使ってみた

    いくつかの記事で話題になっていたTODO管理アプリのClearがいつの…

  6. Web Service

    ブログで使う画像を加工・編集して文字入れや矢印も簡単に挿入できるSkitchの基本的な使い方

    毎回ブログで使う画像はPhotoshopで編集したりしてたんですが、も…

コメント

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

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

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP