Webページ上にルーラーやグリッド線を表示できるWeb制作に便利な拡張機能 『Grid Ruler』

Webページ上に定規ルーラーを表示、

グリッド線を自由に配置できるWeb制作に

便利すぎるChrome拡張機能「Grid Ruler」。

画像や文字の配置など揃えるのに便利です。

gridruler5

Chrome拡張機能 Grid Ruler インストール

インストール

gridruler1

上記リンク先ページをChromeで開き

「Chromeに追加」をクリックします。

gridruler2

拡張機能を追加をクリックすると

インストール完了です。

使用時はアイコンをクリックする必要があるので

頻繁に使う人はピン留めして表示しておくと

便利です。

レビュー

gridruler3

アイコンをクリックすると画面上と左側に

ルーラーが表示されます。

Web制作でCSSなどで整えていく時など

定規が欲しいととても思う時がありますが、

実際に使ってみて便利でした。

長いスクロールする画面などで上下の

画像の大きさを合わせたり、

文字の配置などを揃えたい場合などに

便利です。

gridruler4

ルーラーからドラッグすると自由にグリッド線を

引くことができます。

画像に合わせたり段落に合わせたりと

デザインしたい場所に自由に配置できます。

gridruler5

グリッド線は縦横何本でも引けるので

細かい修正なども可能です。

ただCSSなどを修正して更新ボタンを押すと

グリッド線が消えてしまうのが少し残念ですが、

Webデザイン、制作時に本当に役立つ

シンプルな機能ですが便利な拡張機能です。

  • コメント: 0

時計やGPS、造船などの仕組みを徹底的に解説する理系Webサイト 『Bartosz Ciechanowski』前のページ

ゲームの世界みたいな地図が作成できるWebサービス 『Mapgen4』次のページ

関連記事

  1. 言語・開発

    新しいタブにHTML/CSS/JavaScriptの実行環境ができるChrome拡張機能 『HTML…

    HTMLやJavascriptの実行環境を新しいタブで出来るように…

  2. 言語・開発

    WebのPCやスマホのレスポンシブデザインの確認ができるChrome拡張機能 『Responsive…

    Web画面の開発に必要な様々な解像度での画面確認がありますが、それ…

  3. 言語・開発

    WebサイトのSEO的な分析ができるChrome拡張機能 『AdMatrix Analytics』

    WebサイトのSEO的な分析が出来るChrome拡張機能H1タ…

  4. 言語・開発

    Web開発者に便利!! LCPやFID、CLSの数値を表示する拡張機能 『Web Vitals』

    WebページのUX指標のLCPやFID、CLSの数値を即座に表示す…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

こんな人が書いてます

子供のころからパソコンや電子機械が好きでコンピュータ専門学校を卒業後にIT関連企業に勤めております。

企業や個人のネットワーク構築やパソコントラブル対応、ホームページ制作、システム開発などITに関する仕事を数多く対応しています。

Twitterでこのブログの投稿や日々の出来事などをつぶやいています。Twitter:@mogeringo

最近の記事

PAGE TOP