blog

top > 學展blog

2014.9.29 (Mon)

制作

Chromeブラウザにスケールを!WEB制作をもっと効率よくできる拡張機能Dimensionsをご紹介

di0

こんにちは、よねちゃんです。

皆様、普段ブラウザはなにをお使いですか?
僕は制作のとき以外はもっぱらGoogle Chromeでネットサーフィンをしています。
すごくサクサクと軽くブラウジングできるので多くの方がご利用なのではないかと思います。

とても拡張性が高く自分だけのブラウザにカスタマイズできる点も魅力の一つ。
Chrome ウェブストアでお気に入りの拡張機能を見つけてインストールボタンをポチっと押すだけですぐに使えてとても気軽ですよね!

そんなChrome ウェブストアの中から
今回ご紹介するのは拡張機能”Dimensions”です。

Dimensionsとは

まずはこちらのDimensions、一体どのような機能なのか紹介致します。

di1

機能は至ってシンプル!
ブラウザに表示されているWEBページの様々な場所のサイズを測れてしまうのです。

「それだけー?」と思われる方もいらっしゃるかもしれませんが
WEBサイトを制作する上で気軽にサイズを測れるというのはなかなか重宝するんです!

早速インストールしてみよう

インストール方法もとっても簡単!
まずはGoogle Chromeを起動してhttps://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdjにアクセス。

表示されたページの”+ 無料”というボタンを押します。

di3

ウィンドウが表示されますので追加をクリック。

di4

di5

たったこれだけでインストール完了!

つかってみよう

ではインストールができたら早速つかってみましょう!
ブラウザ右上の十字のアイコンをクリックすると…

di7

このようにマウス位置にスケールが表れました。
あとはサイズを知りたい箇所にカーソルを合わせるだけ!

di6-2

ナビゲーションボタンや

di8

マージン、

di9

そして現在のブラウザの幅などとても簡単で気軽にサイズが測れます。

〆(まとめ)

いかがでしたでしょうか?
簡単にWEBページ内の様々な要素が測れる拡張機能Dimensions。
参考にしたいかっこいいサイトを見つけたらDimensionsを使って至る所をどんなサイジングされているのかみてみてくださいね。

Dimensions
http://felixniklas.com/dimensions/

學展の開催概要はこちらから >