ページビューの合計

2023年5月18日木曜日

Webサイトを作成時に役立つGoogle Chrome拡張機能

Webサイト(フロントエンド)を作成していると、デザインカンプ通りに出来ているか色々確認したくなります。

それに役立つツールを検索してみました。
Google Chrome拡張機能として使うものです。

1. 画面上のオブジェクトの位置やサイズを知る

Designer Tools

以下のサイトで詳しい説明がされています。

「Designer Tools」の使い方:画像や任意の位置のサイズをピクセル単位で測定可能


2. オブジェクトの並びを知る

横方向や縦方向の並びを知るものです。
オブジェクト同士の位置関係を知るために画面上に線を引けます。定規ツールですね。


以下のサイトで詳しい説明がされています。


3. フォント名やサイズを知る

WhatFont

Designer Toolsではフォントを含んだ箱のサイズしか分かりません。テキストのフォント名やサイズを知るためのツールです。

以下のサイトで詳しい説明がされています。

フォントサイズが分かる拡張機能「WhatFont」が便利だよ


4. 色の値を取得する

Webサイトで使っている色の値(カラーコード)を知るためのもです。

ColorZilla




0 件のコメント:

コメントを投稿

Laravel再学習

フロントエンド系の方に興味が行っていましたがまたバックエンド系に戻ってきました。 Laravelです。 かなり忘れてます、自分のブログを見ながらもう一度です。 今回はMVCパターン、そして Eloquentを使えるようになるのが目的です。 まずはプロジェクト作成から 1. Com...