Webサイト(フロントエンド)を作成していると、デザインカンプ通りに出来ているか色々確認したくなります。
それに役立つツールを検索してみました。
Google Chrome拡張機能として使うものです。
Google Chrome拡張機能として使うものです。
1. 画面上のオブジェクトの位置やサイズを知る
以下のサイトで詳しい説明がされています。
「Designer Tools」の使い方:画像や任意の位置のサイズをピクセル単位で測定可能
2. オブジェクトの並びを知る
横方向や縦方向の並びを知るものです。
オブジェクト同士の位置関係を知るために画面上に線を引けます。定規ツールですね。
以下のサイトで詳しい説明がされています。
3. フォント名やサイズを知る
Designer Toolsではフォントを含んだ箱のサイズしか分かりません。テキストのフォント名やサイズを知るためのツールです。
以下のサイトで詳しい説明がされています。
フォントサイズが分かる拡張機能「WhatFont」が便利だよ
4. 色の値を取得する
Webサイトで使っている色の値(カラーコード)を知るためのもです。