e-performance 公式ブログ

ホームページ制作初心者にオススメのGoogle Chrome拡張機能 詳細設定

Chormeの拡張機能の説明|Chrome Web Store - What is an extension?

ホームページを作成するとき、色やフォント、コンテンツのサイズに苦労しませんか?

そんなときは、いろんなホームページを研究しながら作成するのがイチバン。でも、いざ実践を試みても参考元のページの具体的なカラーコードやフォント、幅や高さの値はわかりませんよね?

本日はそんな悩みを解決してくれるGoogle Chromeの拡張機能をご紹介します。非常に有名な拡張機能ですが、これからホームページやブログを作ろうと思っている方には超オススメです(Google Chromeの拡張機能については上の動画をご覧ください)。

ホームページのカラーコードがわかる『ColorPick Eyedropper』

ColorPick Eyedropper

『ColorPick Eyedropper』は開いているページ内からカラーコードを取得できるツールです。掲載の画像は、このブログのメインメニューにカーソルを当てたときのイメージ。カラーコードが『#31A3DD』とわかります。このツールは、画像の色も取得できるので本当に便利です。

以下のリンク先からインストールすると、Chromeの右上に『ColorPick Eyedropper』のアイコンが表示されます。

ColorPick Eyedropper
インストール

ホームページのフォントがわかる『WhatFont』

WhatFont

『WhatFont』は開いているページ内から文字のフォントを取得できるツールです。掲載の画像は、このブログのタイトルのフォントにポインタを当てたときのイメージ。フォントが『OpenSansRegular』とわかりますね。フォント名は文字を見ただけでは想像しにくいので、この拡張機能は本当に便利です。

WhatFont
インストール

レイアウトの幅・高さがわかる『MeasureIt』

measureit

『MeasureIt』は開いているページ内から幅・高さを取得できるツールです。掲載の画像は、このブログのサイドメニューにある「Facebook紹介」の幅・高さを測ったときのイメージ。幅245px、高さ270pxであることがわかります。2カラム以上のレイアウトやボックスレイアウトのホームページを作成するときに重宝できます。

MeasureIt
インストール

以上、ホームページ作成に必要不可欠なカラーコード、フォント、コンテンツサイズを簡単に取得できるChrome拡張機能のご紹介でした。他にも便利なツールはたくさんあります。そのご紹介はまたの機会に。