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

ウェブページ内の直線位置や長さを測るのに超便利なChrome拡張機能「Page Ruler」

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

Page ruler

今日は主にウェブ担当者向けの内容を。

ウェブページのデザインやコーディングをチェックをしていると、こんなことを考えたりします。

「AとBの要素、ちょっとずれてる気がするんだけど、本当に直線位置にあるかな」とか、「このサイトのメインコンテンツ部分の横幅って何pxだろう?」とか。

サイト内・ページ内の要素の配置や長さを、目視だけで確認するには限界がありますよね。

そんなとき、Google Chrome の拡張機能「Page Ruler」を使えば、ウェブページ内の要素の “測る” ことができます。

ウェブ担必須の拡張機能「Page Ruler」

ウェブページ内の要素を計測できるGoogle拡張機能「Page Ruler」。これが非常に便利なので、紹介せずにはいられませんでした。

Page ruler 01

拡張機能の使うと、ウェブページ内で使える「定規・ルーラー」が表示されます。

マウスをドラッグすることで計測位置を決め、その要素の長さを調べることができます。

しかも、その要素の横幅・高さだけでなく、その要素がサイト内の上から何px・下から何pxに位置しているのかも、計測することができます。

Page ruler 02

逆に「Page Ruler」の数字を調整することも可能です。

ウェブ担当者でない人にとってはあんまり面白くない拡張機能ですが、ウェブ担当者にとっては涙がでるほど便利な機能。ぜひ試してみてください。

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

    コメントを残す

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