訪問者の画面解像度は一定ではないため、幅などに注意しておかないと環境によってはレイアウトが崩れたり、見せたいものが見えなくなってしまうなどといったことも起こりうるわけです。
このようなことから、実際にブラウザで表示テストを行う必要があるわけですが、ブラウザのサイズを可変させてベストな大きさを見つけても、そのサイズがいくつなのかを一目で知ることは難しいですね。
Firefoxに「L-Square Responsive Design Inspector」というアドオンをインストールしておけば、こんな時でも現在のウィンドウ有効サイズを素早く計測することができるようになります。
「L-Square Responsive Design Inspector」をインストールすると、アドオンバーに専用のボタン
が設置されます。このボタンをクリックすると、Firefoxのブラウジングエリア上部・左部にルーラーが表示され、表示部の縦横サイズを計測することができます。
ルーラーは50pxごとに数値が表記されており、10pxごとに目盛りが打ってありますので、細かなサイズまで計測することができます。
このように計測を行うことで、自分のコンテンツの最適なサイズを知ることができるようになるというわけです。
画面内の各部を計測するようなアドオンはいくつかありますが、このようにブラウジングスペースの現在サイズを計測できるようになるのも制作の助けになるのではないでしょうか。
ダウンロード：L-Square Responsive Design Inspector（Add-ons for Firefox）
＜関連記事＞
■閲覧ページの各部サイズを計測する「MeasureIt」
■ウェブページ各部のサイズを簡単に計測できるFirefoxアドオン「Page Ruler」
■ウェブページやFirefoxのUIを拡大表示して詳細を確認できるアドオン「Magnifier」
■Firefoxのウィンドウサイズを一発で変更することができるブックマークレット作成法。
ツイート
