15 Must-Have Bookmarklets For Web Designers And Developers

WEBデザイナ/開発者が覚えておくと便利なブックマークレット集。
起動すると、その場で画像などの要素をドラッグ＆ドロップでデザインできたりする便利なブックマークレット集です。

ReCSS - Reloads The CSS

起動すると、サイトのＣＳＳが再読込みされ、リロードすることなく見栄えの更新ができる

Edit Any Website - ブックマークレット


XRAY - See Details Of Any Web Element

起動するとJavaScript製のＤＯＭインスペクタが起動します。

MRI

起動してエレメントをクリックすると、クリックしたエレメントのセレクタが取得可能。


Design - Grid-Rule-Unit-Crosshair

起動すると、4つのツールを起動できるランチャが表示され、サイトにグリッドを表示させてデザインに役立てることが可能。

グリッドを表示した例


Slayer Office - Favelet Suite

起動すると、色リストやサイトのツリー構造を表示できたりする便利ツールを提供

Aardvark - Display Elements & More

起動すると、選択したエレメントを削除したり、選択部分のソース見たりといった機能を提供。
機能はそれぞれショートカットが割り当てられていて使いやすい。

W3C Markup Validator ブックマークレット

マークアップバリデートを行うブックマークレット

W3C CSS Validator - ブックマークレット

CSSバリデートを行うブックマークレット

Resize Browsers

ブラウザのリサイズを行うブックマークレット

Super Screen Shot - ブックマークレット

スクリーンショットが取れるブックマークレット

Browsershots - ブックマークレット

複数のブラウザで動作確認するブックマークレット

Google Translate - ブックマークレット

翻訳を行えるブックマークレット

ブックマークレットならインストールも簡単ですし、こうしたソフトウェアのディストリビュート方法もいいですね。

関連エントリ

• ウィンドウサイズ変更ブックマークレット
• ブラウザ上の重力を操作できるSafari用ブックマークレット「gravity」
• フォームの入力ボックスを動的にリサイズできるブックマークレット
• JavaScriptコードをブックマークレットに変換するPerlスクリプト「JavaScript Bookmarklet Builder」