<a title="Mike Rohde's Sketch Kit (Open)" href="http://flickr.com/photos/rohdesign/247103592/" onclick="window.open('http://flickr.com/photos/rohdesign/247103592/'); return false;"><img alt="WEBデザイナー必携のブックマークレット" src="http://web-marketing.zako.org/images/design-tool.jpg" width="250" height="166" /></a>
<p>これはすごい。以前に<a href="http://web-marketing.zako.org/web-tools/web-ruler-grid-bookmark-let.html" onclick="javascript:urchinTracker('/go/text_link');" onkeypress="return hs.expand(this)">WEBデザイナーの必須ツール「グリッド表示ルーラーブックマークレット」</a>なるものをご紹介しましたが、今回はグリッドだけでなく、2クリックでカンタンにブロックの寸法を測りながらHTML要素を表示したり、使い勝手の良い定規を表示したりすることの出来るWEBデザイナーにはうってつけのブックマークレットをご紹介。</p>

<!--more-->
<h3 class="tips">WEBデザイナー必携のDesign bookmarklet</h3>
<p>このブックマークレットに付いている機能は下記の４つ。</p>
<dl>
<dt>グリッド</dt>
<dd>カラムの数や幅、カラム同士のマージンなどなど、様々なレイアウトをガイドしてくれるグリッド</dd>
<dt>定規</dt>
<dd>0の位置を自由に移動できる縦横定規機能</dd>
<dt>ユニット</dt>
<dd>わずか2クリックで「幅」、「高さ」、「HTML要素」、「id」、「class」まで表示してくれる機能</dd>
<dt>十字カーソル</dt>
<dd>十字カーソル中心部の位置が縦横どれくらいかを表示してくれる機能</dd>
</dl>
<p>↓言葉で書いても伝わりづらそうなので、動画キャプチャしてみました。</p>
<object width="425" height="373"><param name="movie" value="http://www.youtube.com/v/-HSJH0ifq0c&rel=0&color1=0xe1600f&color2=0xfebd01&border=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/-HSJH0ifq0c&rel=0&color1=0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed></object>

<p>試してみたい方は<a class="web-site-link" href="http://www.sprymedia.co.uk/article/Design" onclick="window.open('http://www.sprymedia.co.uk/article/Design'); return false;">Allan Jardine | Design</a>へ行き、↓のボタンを右クリックで「ブックマークに追加」、またはドラッグしてブックマークツールバーに追加してください。</p>
<p><img alt="design.jpg" src="http://web-marketing.zako.org/images/design.jpg" width="150" height="30" /></p>

<h4 class="tips">関連情報</h4>
<ul>
<li>Ｖｉａ：<a class="web-site-link" href="http://www.cssbeauty.com/archives/2007/December/design_bookmarklet/" onclick="window.open('http://www.cssbeauty.com/archives/2007/December/design_bookmarklet/'); return false;">CSS Beauty</a></li>
<li><a href="http://web-marketing.zako.org/web-tools/" onclick="javascript:urchinTracker('/go/Under_link');" onkeypress="return hs.expand(this)">使えるWEBツールまとめ</a></li>
</ul>