ウェブサイト作成に役立つChrome拡張機能14個

スクリーンショット

スクリーンショットを撮る拡張機能です。切り取りがかなり便利です。

Awesome Screenshot: キャプチャーと注釈

スクリーンショットを撮って、それを切り取ったりテキストを挿入したりできます。その他にも、ぼかしや矢印、楕円なども挿入できます。切り取る際にサイズが表示されて使いやすいです。ページ全体のスクリーンショットも撮れます。あとは画像を縮小できれば文句なしですね。

webページショット - Webpage Screenshot

内容的には先ほどのものとほぼ同じでテキスト、矢印、楕円などを挿入できます。テキストに陰がつくなど若干の違いがあります。

サイトの表示に関するもの

ウェブサイトの表示を確認するものや、表示速度の高速化に役立つものを。

Resolution Test

ブラウザが選択したサイズになります。実際の解像度を変更することなく、手軽に様々な解像度でのサイト表示を確認することができます。

IE Tab

IEでの表示を確認したいときはこちらが便利です。IE Tabを使うとCSS3で作ったOperaのロゴも下のように四角になります。

ただ、バージョンごとの詳しい確認はIETesterなどを使った方がいいですね。

Page Speed

サイト表示を高速化するためのアドバイスがもらえます。ただ、指摘の中にはtwitterのボタンなど外部サービスを使っているとどうしようもないものもあります。

これはストアにないので、インストールの方法が詳しく紹介されている「ついに出た！Chrome版「Page Speed」の使い方」などをご参考に。

スタイルシート関連

CSSの変更がリアルタイムに適用されるためデザインの変更に役立つものや、スタイルシートに内容が視覚的に分かるものなど面白いものがそろってます。

CSS Tester

CSSを記述すると、その内容がリアルタイムで適用されます。サイトのデザイン変更のときなどは、確認の際にいちいち画面を更新する必要がないので便利です。

code cola

画面上で選択した場所のCSSのプロパティを自由に変更できて、リアルタイムで適用されます。

クリックすると要素が選択され下の部分で簡単にCSSを変更できます。

コードを記述する必要がないのでお手軽です。text-shadowやopacityなどCSS3の要素も入っています。

CSSViewer

マウスを乗せたところのCSSの内容が表示されます。思ったようにスタイルが適用されているかチェックする場合などに使えそうです。

Web Developer

CSSを適用しなくしたり、divの外枠を表示したり、画像のサイズを表示したり、挙げだすときりがないくらい色々できます。CSS関連だけでもこれだけあります。

例えば左上の「Disable All Styles」を選ぶと、CSSを適用されなくなり「はてなブックマーク」もこんな感じになります。

「メニューの画像が1つになっていて、CSS スプライト使っているんだ～。」なんて新しい発見があるかもしれません。

画像関連でも、alt属性の内容を表示させたり、背景画像の表示をなくしたりいろいろできて楽しいです。

Firebug Lite

Firefoxで有名なyFirebugのchrome板です。CSSだけでなく、HTMLやJavaScriptなどもリアルタイムで編集できます。

HTMLエディター

簡易なエディターです。ちょっとした編集でわざわざソフトを起動するのも面倒ってときに。

NoteBook Professional

「Visual editor」と「HTML Mode」があり、特殊文字の変換にも使えるかも。

Editor Lite

HTML5のサンプルなんかも用意されています。

小技的なもの

Multi-URL Shortener/Expander

長いURLを短縮サービスを使って短縮します。

Create Link

開いているページのリンクを簡単に作れます。HTMLをクリックすると、以下のようにタイトルにリンクを付けたコードがコピーされます。

<a href="http://weboook.blog22.fc2.com/">Webpark - ウェブサイト作成に役立つことをいろいろと</a>

設定（Configure）でリンク先を別枠へ表示するなどカスタマイズできます。