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

Responsive Design Bookmarklet

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

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

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

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives