WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： いっちー
カテゴリー： トレンド >サービス紹介

Web業界で働いていると、便利なツールが多すぎてどれを使えばいいのだろうって悩むことがありますよね。
今回はそんな方々に向けて、私がWeb制作で使っているおススメのツールを3つ紹介します！

GoogleChrome拡張機能「crxMouse」

まず一つ目は、GoogleChrome拡張機能「crxMouse」です。
こちらの拡張機能はマウスを右クリックしながら特定の方向に移動することで、「前のページに戻る」や「新しいタブを作る」などを行うことができます。
それでは使い方を紹介します。

crxMouse

1.ショートカットを登録する

プラグインを起動して下記画像の画面が表示されたら、右上にある歯車マークを押します。

歯車マークを押して下記画像のページを開きます。
そして画像左側の赤枠の「スーパードラッグ」をクリックします。

すると下記のようなページになります。赤枠の部分を変更することで自分好みのショートカットを設定することができます。
一つ設定しておくだけでも便利なので、ぜひ設定してみてください。

2.実際に使う

右クリックしながらマウスを動かすと下記画像の赤枠のように紫の線が引かれ、右クリックを離すと決められたショートカットが動作します。

Google Chrome拡張機能「Alt & Meta viewer」

2つ目はChrome拡張機能「Alt & Meta viewer」です。
こちらは、起動するだけでページのtitle・metaや画像のaltなどを表示することができます。

Alt & Meta viewer

なぜAlt & Meta viewerを使った方がいいのか

年々アクセシビリティの重要度が上がってきており、目の見えない方でも、どのような画像が表示されているのかがわかるようにaltを記述する必要があります。しかし、ソースコードからimgタグの付いたものを一つ一つ確認するのは少し大変ですよね。そんな時にこちらの拡張機能が便利で、簡単にaltの文章を確認することができます。
個人的には、3つ紹介するプラグインの中で、最も必須になってくると思いますので、ぜひ入れてみてください。

ダミー画像生成ツール「placehold.jp」

3つ目は、placehold.jpというダミー画像生成ツールです。
コーディングをする中で、確定の画像が届くまでダミー画像を入れておくことがあると思います。そんな時に便利なツールです。

placehold.jp

便利な点

URLで記述ができるので、画像を差し替えた時に、ダミー画像を削除する手間が省けたり、背景色や文字などを自由に設定できます。

まとめ

今回は、私が普段コーディングで使っているツールをご紹介しました。
特に二つ目に関しては、インストールして損はないと思うので、ぜひ使ってみてください。