Webデザインにおいて、配置や長さ、余白などを設定する際、ピクセル単位での調整が必要になります。
前回のエントリーに書いた通り、先日サイトデザインを変更しましたが、そのときにも、背景画像とタイトル画像、そしてロゴ画像の位置を細かく調整する必要がありました。
そんなときに重宝しているツールが、WEB ブラウザ上でグリッド線を表示してくれるブックマークレットです。
自分のサイトの隙間の幅を調整するために使用したり、参考になると思った他のサイトの配置情報をチェックしたりと、以前から頻繁に使用しています。
［スポンサード リンク］
参考にしたのは、このサイト。
このサイトに記載されているブックマークレット。
- グリッド表示（左クリックすると、グリッドのサンプルが表示されます）
これを右クリックして「お気に入りに追加」すればOK！
（上記画像は、Internet Explorerのメニュー。Firefoxの場合は、「このリンクをブックマーク」にしてください）
すると、お気に入り（ブックマーク）に「グリッド表示」という項目が登録されます。
グリッドを表示したいページを開き、登録した「グリッド表示」をクリックすると、ご覧の通り。
グリッドのマス目のサイズは50px、長い目盛りは10px、短い目盛りは5px間隔です。
表示されるグリッドは、ドラックで移動できます。
さらに、コントロールボックスを使えば、微調整も可能。ボタンを使い、10px、もしくは、1px単位で移動できます。
コントロールボックス左上のボタンで、淡いグレー・赤・緑・青・濃いグレーと、グリッドの色を変えることができ、様々なデザインのサイトで使用可能です。
使い方の詳細については、配布先のサイトに記載されています。
Webデザインのお役立ちツールとして、ご活用ください。
【関連記事】
追加
