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

    CSS3を使って超カンタンにクールなボタンを作ることができるジェネレーター「Button Maker…

    CSS3を使ってとても簡単にクールなボタンを作ることができるジェネレー…

  2. Web Service

    ブラウザに好きな時間のタイマーをセットしてカウントダウンしてくれるE.gg Timerがとても便利

    ブラウザに自分の好きな時間を入れてenterを押すだけでタイマーをセッ…

  3. Web Service

    マウスを動かすことで自分の好きな色を見つけることができる「Piknik Color Picker」

    とてもお洒落でシンプルなカラーピッカー「Piknik Color Pi…

  4. PageSpeed Insights

    Web Service

    Webサイト高速化にするための必要項目を教えてくれるGoogleツール「PageSpeed Insi…

    Webサイトを高速化にするために必要な項目を教えてくれるGoogleツ…

  5. placekitten

    Web Service

    Webサイト作成時に可愛い猫のダミー画像を用意してくれる「placekitten」

    とても素敵なWebサービスがあったのでご紹介します。Webサイトを作成…

  6. Web Service

    iPhoneアプリのPictShareを使えば画像を簡単にDropboxやEvernoteなど色々な…

    iPhoneに入っている画像を簡単かつ素早くアップロードできるアプリ「…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP