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」についてでした。

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

Screenqueri.esブラウザ上でレスポンシブWebデザインを確認することができるツール「Screenqueri.es」前のページ

テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery plugin」次のページArt Text Light jQuery plugin

関連記事

  1. Web Service

    最大150枚の画像を一気にリサイズできる「Bulk Resize Photos」

    複数の画像を一気にリサイズすることができる便利なサービス「Bulk R…

  2. Web Service

    現在のブラウザサイズをリアルタイムで教えてくれる「What’s My Browser S…

    かなりシンプルでよさげなWebサービスがあったのでご紹介します。現在の…

  3. Chrome拡張機能「PageSpeed Insights」

    Web Service

    「PageSpeed Insights」のChrome拡張機能があったのでインストールしてみた

    以前ご紹介したWebサイトを高速化するためのGoogleツール「Pag…

  4. Web Service

    CSSでBorder Radiusだけのコードを生成してくれるジェネレーター「CSS Border …

    CSSでBorder Radiusだけのコードを生成してくれるジェネレ…

  5. Web Service

    CSS Sprite用の画像やコードを簡単に作成してくれるCSS Sprite Generatorを…

    すごい今更なんですがCSS Spriteを初めて試してみました。自分で…

  6. Pocketのリスト並べ替え

    Web Service

    Pocket(Web版)で記事リストを最新から最古に並べ替える設定方法

    Web版(ブラウザ)のPocketで記事リストを表示させるとデフォルト…

コメント

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

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

最近の記事

  1. 桜と太陽
  2. ベルボン Mシリーズ
  3. ネック冷却ファン NRF10
  4. Kindle 8GBモデル
  5. プロテクティングクロス PC-E2

アーカイブ

PAGE TOP