プログラミングeメモ

始まりは自分用メモから。

Chromeでホームページを作成する際、個人的にオススメしたい拡張機能

time 2017/12/17

Chromeでホームページを作成する際、個人的にオススメしたい拡張機能

Chromeでホームページを作成する際、個人的にオススメしたい拡張機能

みなさん、こんばんにちは。
みなさんブラウザは何をお使いですか?私は主にChromeを使っています(*´▽`*)
ホームページを作成する上で主にChromeを使って作成しており、よくChromeの拡張機能を使います。
今回は拡張機能の準備~使用、使いやすいと思ったものを簡単にご紹介したいと思います。

sponsored link

準備~使用

準備

1.Chromeを立ち上げたら「アプリ」と記載されたものがありますのでこちらを選び、「ウェブストア」を選びます。
パソコンにChromeがインストールされていない場合は、下記URLよりダウンロードしてください。
https://www.google.co.jp/chrome/browser/desktop/index.html

2.拡張機能が初期で選ばれていますので、右側から欲しい機能を選ぶか検索して探します。

3.「CHROMEに追加」を選択すれば、URL右側に拡張機能のアイコンが表示され使用できるようになります。
今回は部分的な場所しか表示しておりませんのでご了承下さい。

GIF-chrome01

使用方法

1.拡張機能によって使用方法が異なるのですが、大抵はアイコンをクリックすれば使用できると思います。
詳しい使い方に関しては、各拡張機能を追加する際の概要に記載されていると思います。

GIF-chrome02

紹介

Alt&Meta viewer

配置した画像のAltで設定した内容を確認、並びに画像の大きさを確認できる。
またそのページのTitleとmeta要素も確認することができます。
使い方はアイコンをクリックし、「画像のALT表示」「Title Meta表示」でそれぞれの詳細が表示されます。
対象にカーソルを合わせれば、その物だけ表示されます。
「画像のALT表示」での表示を消したい場合は右上に表示されている☓マークをクリックしてください。
「Title Meta表示」での表示を消したい場合はCLOSEを選択してください。

GIF-chrome03

Grid Ruler

ONにすると左端と上に定規が表示されます。
表示された定規部分をクリックした状態で定規がない部分へ引っ張ると線が出てきます。
左側の定規からは縦線が、上の定規なら横線が引っ張ってこれます。
表示を消したい場合は、再度アイコンをクリックしてください。

GIF-chrome04

ColorPick Eyedropper

使われているカラーのRGB値や16進数を調べられます。
使い方はアイコンをクリックして、調べたい色の上にマウスを重ねるだけです。
重ねた色の部分でクリックすれば、そのカラーの16進数(#000000など)を参照することができます。
終了する時は表示されている詳細内の☓ボタンで終了できます。

GIF-chrome05

Dimensions

画像と画像の間や文章の行間などを調べる時に役立ちます。
特に要素を配置した際などきちんと間を空けられているか確認する時などに重宝すると思います。
正確に測れない場合は「Grid Ruler」と組み合わせることで、正確に測ることができます。
「Grid Ruler」と組み合わせて使う場合は、先に「Grid Ruler」ONにして「Dimensions」をONにしてください。
表示を消したい場合は、再度アイコンをクリックしてください。

GIF-chrome06

終わりに(*´▽`*)

今回はChromeの拡張機能について紹介させていただきました。
これ以上に便利なものがあれば更新をしていこうと思います。

sponsored link

down

コメントする




プロフィール

とみ

とみ

1985年生まれのおっさんです。 5年前ぐらいから色々とプログラミングの仕事したり工事(水道とかエアコンとか大工とか)したりして食ってます。 何か質問とか文句とかがあれば
tomi@e-archi.net
へ連絡いただければと思います!

最近のコメント

    

    sponsored link