Warning: count(): Parameter must be an array or an object that implements Countable in /home/yagroup/dripn-snip.com/public_html/wp-includes/post-template.php on line 284
レスポンシブデザインのテストツール、Resizer | Drip 'n' Snip

Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
スポンサーリンク

レスポンシブデザインのテストツール、Resizer

2016/06/24

Pocket

最近麦茶量産体制に入っている僕です。
1日で割りとダメになっちゃうので、毎晩まだ結構残っている麦茶を捨てて少し洗って新しい水とパックを入れて…という作業をしていますが、「それでもペットボトルドリンクを買って、砂糖だらけのジュースを飲むよりは財布にも体にも優しい」と自分に言い聞かせています。

さて、今日はWebページを制作されている方や、これから制作したいと思っている方に向けての記事です。

レスポンシブデザインのサイトチェック、どうしてますか?

最近ではモバイルファーストでWebページを作ることも多くなって、レスポンシブなサイトを構築される機会が増えていると思います。
レスポンシブデザインは、スマホやタブレットといった画面の小さいデバイスに向けたサイトとPCなどの画面の大きいデバイスに向けたページを分けずに、画面サイズに応じて自動的にレイアウトを変更する事によって1つのサイトで全てのデバイスに対応してしまおう、というデザイン方法です。
レスポンシブデザイン方法は別の記事に譲るとして、指定幅で自分の思った通りの挙動になるのかを、ブラウザのサイズを変更して確かめていたのでは大変です。今そのブラウザが本当に思った通りのサイズなのか、確認するすべが無いからです。iPhone5の幅よりも1px小さいサイズじゃないと本当はカラム落ちしていないかもしれません。

そこで、Resizerというブックマークレット。
http://lab.maltewassermann.com/viewport-resizer/

このページの、CLICK OR BOOKMARKと書いてある場所をドラッグしてブックマークに追加しましょう。
そして、レスポンシブチェックをしたいサイトに行ってから、そのブックマークにある<-> resizerをクリックすると…

↔_Drip__n__Snip___ドリップン・スニップ

サイト上にこんなバーが出現します。
そして、それぞれのアイコンをタップすると、なんと画面のサイズがそれぞれのサイズにFIXされるのです!

タブレットサイズ

↔_Drip__n__Snip___ドリップン・スニップ

iphone5
↔_Drip__n__Snip___ドリップン・スニップ

Resizerの凄いところ

このブックマークレットの凄いところは、インストールも会員登録も不要で、いつも使っているブラウザですぐ使えるところです。
Googleも、Google resizerという似た機能のあるサイトを作っていますが、あちらは一度Google Resizerのページに飛んでからサイトのURLを入力する必要がありますが、こちらはそのサイトに居たままブックマークレットをクリックするだけです。
さらに、右上のanimateボタンを押せば、自動的に幅を少しずつ狭めて戻してを繰り返してくれます。
両手が自由になるのでとても便利です!
resize

まとめ

無料で、ブックマークするだけで使えるので、とりあえずブックマークしておくと良いのではないでしょうか。
使用するまでに手数が少ないので、特に製作中に力を発揮します!
今はWEB制作はしていないという方も、いつか自分でWEBページを作りたくなった時のために是非覚えておいてください!

                           

  関連記事

Macユーザーのための!Markdown Editorの新定番Quiver

こんにちは、皆さんは文章を書くとき、考える時には何を使われていますか? Wind ...

Todoistを使って、GTDライクに自分の「したいこと」「すべきこと」を可視化しよう! 2 - Drip'n'Todone

前回の続きです。 Drip'n'Todoneの実行法 Drip'n'Todone ...

画像をまとめてリサイズ&リネーム!iMageToolsを使って写真管理を楽にしよう

夏は好きだが梅雨は嫌いな僕です。 こんにちは。 皆さんは写真の管理ってどうされて ...

iPhoneが壊れてもデータは無傷!iColudとiCloud Driveを活用しよう

こんにちは!最近友達がiPhoneを水没させてしまって、一緒に競争していたゲーム ...

【2016年保存版】Google AdWordsでインターネット広告を出そう

今回はGoogle AdWordsで広告を出して、ビジネスの収益を上げたい!とい ...

-アプリ/サービス
-