4/8 ページ全体に目盛り(方眼)画像を重ねて測る [ホームページ作成] All About

目盛り（方眼）画像の表示・非表示を切り替えるサンプル

前ページのソースを表示させると、以下のようになります。
「グリッドを重ねる」ボタンをクリックすると、現在閲覧しているこのページ全体に目盛り（方眼）画像が重なって表示されます。

※使用上の注意※
目盛り（方眼）画像が重なっている箇所は、すべてのリンクやボタンがクリックできなくなります。（重ねられた画像に阻まれるため）
目盛り（方眼）画像を消すには、ページの最上部左側に現れる「グリッドを消す」ボタンをクリックして下さい。

目盛り画像の表示・非表示ボタンを、マウスではなくショートカットキーで押せるようにしておくと、簡単に切り替えられて便利です。そのためには、以下のようにソースを修正（追記）します。

<input type="button" value="グリッドを重ねる" onclick="ShowGrid();" accesskey="1">

<input type="button" value="グリッドを消す" onclick="HideGrid();" accesskey="2">

上記のように、accesskey属性を加えると、値に指定したキーを押したときに、ボタンをクリックしたのと同じ効果が得られます。
※このページのサンプルにも記述してありますので試してみて下さい。

上記では、「グリッドを重ねる」ボタンに「1」キーを割り当て、「グリッドを消す」ボタンに「2」キーを割り当てていますから、以下のようにキーを押すことで、マウスを使わずに表示・非表示を切り替えられます。
※テンキーの[1]・[2]キーではなく、キーボード左上の[1]・[2]キーを使って下さい。

※Windows版IEの場合は、上記のように[Alt]キーと組み合わせます。Windows版Firefoxだと[Alt]＋[Shift]キーと組み合わせます。

今回は、ページ上のブロック間の距離や配置座標を調べるのに便利な、目盛り（方眼）画像をページ全体に重ねてみる方法をご紹介いたしました。何か測りたくなった場合にお試し下さい。

【関連記事】