スポンサーサイト

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

ブラウザにグリッドを表示する方法 ~グリッド表示用ブックマークレット

2008年11月12日
ブラウザにグリッドを表示する方法 ~グリッド表示用ブックマークレット

Webデザインにおいて、配置や長さ、余白などを設定する際、ピクセル単位での調整が必要になります。

前回のエントリーに書いた通り、先日サイトデザインを変更しましたが、そのときにも、背景画像とタイトル画像、そしてロゴ画像の位置を細かく調整する必要がありました。

そんなときに重宝しているツールが、WEB ブラウザ上でグリッド線を表示してくれるブックマークレットです。

自分のサイトの隙間の幅を調整するために使用したり、参考になると思った他のサイトの配置情報をチェックしたりと、以前から頻繁に使用しています。

[スポンサード リンク]


参考にしたのは、このサイト。



このサイトに記載されているブックマークレット。

  • グリッド表示(左クリックすると、グリッドのサンプルが表示されます)

これを右クリックして「お気に入りに追加」すればOK!

IE 右クリックメニュー

(上記画像は、Internet Explorerのメニュー。Firefoxの場合は、「このリンクをブックマーク」にしてください)

すると、お気に入り(ブックマーク)に「グリッド表示」という項目が登録されます。
グリッドを表示したいページを開き、登録した「グリッド表示」をクリックすると、ご覧の通り。

グリッドの表示

グリッドのマス目のサイズは50px、長い目盛りは10px、短い目盛りは5px間隔です。

表示されるグリッドは、ドラックで移動できます。
さらに、コントロールボックスを使えば、微調整も可能。ボタンを使い、10px、もしくは、1px単位で移動できます。

コントロールボックス

コントロールボックス左上のボタンで、淡いグレー・赤・緑・青・濃いグレーと、グリッドの色を変えることができ、様々なデザインのサイトで使用可能です。

使い方の詳細については、配布先のサイトに記載されています。



Webデザインのお役立ちツールとして、ご活用ください。

【関連記事】
コメント

管理者だけに表示する

このサイトについて

検索ボックス

プロフィール

順光寺公式サイト

最近の記事

Twitter

ソーシャルサービス

私が運営のお手伝いをしているサイト(開設順)

カテゴリー

カレンダー

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