iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

ウェブディレクターの私が利用する3つのウインドウサイズ一発調整ツール

この記事のURLとタイトルをコピーする

本職のウェブディレクターとして活動している中で、しばしば頭を悩ませている問題がありました。

それが、ウェブブラウザのウインドウサイズです。

ウェブページの調査したり、制作したページの確認をする時など、ウインドウサイズを気にしなければならない機会は度々訪れます。レスポンシブウェブデザイン案件の増加も原因のひとつです。

そんなときに便利なツールが3つほどあります。1つはChromeのアドオンを使用する方法。残りの2つはブックマークレットを使用する方法です。

もしあなたがウェブ関係の仕事をされているなら、役に立つかもしれません。

ウインドウサイズの一発調整ツール

Chromeアドオン「Window Resizer」

[browsershot url=”https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh” width=”300″]

via: Window Resizer

まず最初に、GoogleChromeのアドオンである「Window Resizer」の紹介です。

機能は2つあります。1つはウインドウサイズの一発リサイズで、もう1つはウインドウサイズの計測です。

アドオンボタンをクリックすると、予め設定しておいたウインドウサイズに一発で調整してくれます。

Window Resizer

また、ウインドウサイズを自分で調整している時は、画面の右下に現在のウインドウサイズを表示してくれます。

Window Resizer 1

ブックマークレット「Responsive Design Bookmarklet」

[browsershot url=”http://responsive.victorcoulon.fr/” width=”300″]

via: Responsive Design Bookmarklet

次にブックマークレット「Responsive Design Bookmarklet」の紹介です。

画面リサイズしたいページで、このブックマークレットを使用すると、そのページがリロードされます。

そして、以下のような画面になります。

Responsive Design Bookmarklet

画面上部に表示されているのが、リサイズできるウインドウサイズ。これをクリックすると、スマホやタブレットのウインドウサイズを擬似的に体験できます。

Responsive Design Bookmarklet 1

□設定の方法

ブックマークレットの設定方法は非常に簡単です。

先ほど紹介したウェブページに行き、画面中央にある「RWD Bookmarklet」というボタンをブックマークバーにドラッグ&ドロップ。これでOKです。

Responsive Design Bookmarklet 2

スマホサイズを別窓で開くブックマークレット

[browsershot url=”http://dsuket.hatenablog.com/entry/2012/10/05/143110″ width=”300″]

via: Chrome/Safari でスマホサイズの表示テストをする方法 – webとかmacとかやってみようか R

最後に、スマホサイズのウインドウを別窓で開く方法です。

上のウェブサイトに行き、その中にある以下の部分をブックマークに追加します。

スマホサイズを別窓で開く

リサイズしたいページでこのブックマークレットを使用すると、そのページが別窓で開かれ、開かれた画面サイズがスマホ(iPhone)のサイズになります。

スマホサイズを別窓で開く 1

複数の画面を横並びにしたい時などは非常に重宝しています。

あとがき

どのツールも一長一短で、「これだけ入れておけばオールオッケー」と言えないのが残念です。

例えばChromeのアドオンである「Window Resizer」。Chromeの特性上、アドオンを多く入れている人はある一定幅以上はウインドウの横幅を狭められない問題があります。

こんな具合で、それぞれのツールに使いやすさ・使いにくさがあると思います。なので、使い分ける方がいいでしょう。私も現状、すべてのツールをすぐに使える状態にあり、適宜使い分けるようにしています。

それでは、今日はこのあたりで。




この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。
管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。
各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です