ページの上から目盛り（方眼）画像を重ねるには
まずは、目盛り（方眼）画像をダウンロードして下さい。1000×1000ピクセルの画像を4種類用意しました。 どれでもお好きなものを（全部でも）ダウンロードしてご活用下さい。
目盛り画像A（数字なし）, 目盛り画像A（数字あり）
目盛り画像B（数字なし）, 目盛り画像B（数字あり）
ページの上からこの目盛り（方眼）画像を重ねるには、スタイルシートを利用します。
画像を直接重ねるよう指定しても良いのですが、そうすると画像をタイル状に繰り返せません。 そこで、div要素を1つ用意して、そのボックスの背景画像として目盛り（方眼）画像を表示させるようにしています。
上記ソースのうち、「grid1000a.gif」部分は画像ファイル名です。「100%」は横幅の指定、「1500px」は高さの指定です。 それ以外は、そのまま記述します。
このソースを、目的のページのHTML中に記述します。記述場所はどこでも構いません。ページの末尾</body>タグの直前あたりで良いでしょう。
■position, top, left：
positionプロパティに値「absolute」を指定することで、div要素全体を本来の表示位置から切り離します。 topプロパティとleftプロパティの値に「0px」を指定しているので、このdiv要素は、ページの左上0ピクセルの位置から表示されることになります。
■background-image：
background-imageプロパティで、目盛り（方眼）画像を背景画像として指定しています。 背景画像にすることで、ページの幅や高さが1000ピクセルを越えていても、目盛り画像を繰り返し表示させることができます。
■ウインドウの端からは表示されない場合：
positionプロパティに値「absolute」を指定することで、そのボックスを本来表示される位置から独立して自由な位置に表示できるようになります。 その際、表示位置の基準になる点は、『positionプロパティに値static以外が指定されている、最も近い階層のボックス』です。 そのようなボックスが存在しない場合は、『html要素（＝ウインドウの端）』が基準になります。
ですから、他にpositionプロパティを使っていないようなページであれば、ウインドウの端から目盛り（方眼）画像を表示できます。 All Aboutサイト内では、スタイルシートにかなりpositoinプロパティが含まれているので、ウインドウの端からは表示できません。
表示・非表示を切り替えられるようにするには
上記のソースだと、ページを表示すると同時に目盛り（方眼）画像が表示されます。
基本的にこの画像の用途は、ページ制作時に一時的に表示させるだけですから、これでも問題ないでしょう。 必要なときに上記のソースをHTML中に記述し、不要になったときに削除すれば良いだけです。
しかし、何度も目盛り（方眼）画像を表示したり消したりして位置を確認したい場合は、JavaScriptを用いて表示・非表示を切り替えられると便利かも知れません。
その方法を次のページでご紹介いたします。
