スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

Chrome ウェブストア日本版の開設を記念?して便利そうな拡張機能を紹介します。拡張機能の紹介は結構ありふれていますし、挙げだすときりがないのでウェブサイト作成に役立ちそうなもの限定で紹介ということで。

スクリーンショット

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

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

Awesome-Screenshot.png

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

webページショット - Webpage Screenshot

webページショット - Webpage Screenshot

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

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

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

Resolution Test

Resolution Test

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

IE Tab

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

IE Tab

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

Page Speed

Page Speed

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

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

スタイルシート関連

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

CSS Tester

CSS Tester

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

code cola

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

code-cola0.png

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

code cola

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

CSSViewer

CSSViewer

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

Web Developer

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

Web Developer

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

Web Developer

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

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

Firebug Lite

Firebug Lite

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

HTMLエディター

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

NoteBook Professional

NoteBook Professional

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

Editor Lite

Editor Lite

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

小技的なもの

Multi-URL Shortener/Expander

Multi-URL Shortener/Expander

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

Create Link

Create Link

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

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

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

まとめ
特にCSS関連の拡張機能は面白かったです。拡張機能やアプリはこれからどんどん増えて、パソコンはブラウザさえあれば事足りるという時代も来るのかな。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。