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

    あとで読む「Readability」にChrome/iPhone/Reederなどから簡単に情報を送…

    前から気になっていた、iPhoneアプリのReadabilityをよう…

  2. プレーンテキストでペースト

    Web Service

    Evernoteのペースト時にリッチテキストではなくプレーンテキスト(スタイルなし)にする方法

    意外と活用するシチュエーションが多いのでメモがてらご紹介します。Eve…

  3. Web Service

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

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

  4. TodoistのChrome拡張機能

    Web Service

    TodoistのChrome拡張機能があったので使ってみた

    普段から使っているTodo管理サービス「Todoist」のChrome…

  5. Web Service

    あとで読むサービス「Read it Later」をMacで快適に読むアプリ「ReadNow」

    iPhoneであとで読むアプリとしてRead it Laterを使って…

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP