スペースGIFを余白の管理が容易です。例えば、PageMillで「タイトルの次は･･･すこし間隔をあけて･･･本文を書きたい。」「Webページのデザインの基本は余白を取ることだよなぁ」そう思ったときは、どうしていますか?そりゃ簡単だ。「改行して、2バイト(全角文字)の空白をいれればいいんだよ」「調整したければ、その空白のサイズを変更すればいいんじゃない?」はい!! 正解です。でも、もうすこし微妙に間隔をあげたいときは画像を使います。
「でも･･･いろんなサイズの画像作るのは面倒だし、Webページが重たくなるじゃん」いえいえ･･･画像は1種類。しかも1ピクセルで充分ですよ。「でも･･･1ピクセルを10個重ねて10ピクセル分の間隔あけるのは面倒じゃん」いえいえ･･･画像は1ピクセルを1個。それをPageMillの属性パレットを使って、10ピクセルとか20ピクセルとか指定すればOkだよ」「えええええ、そんなやり方があるの? 教えて〜」(笑)と、言うことで
Photoshopなどで縦1ピクセル、横1ピクセル、背景を無色で作成します。ここに作成してものがありますが、無色で1ピクセルなので(^^;) ブラウザーで見ても見えないです。もし画像を作るのが面倒という方は「space.gifくれ!!」とメールを送信していただけば、添付ファイルにして送ります。
「挿入」メニューより「オブジェクト」「画像...」を選択し、(1)で作成したspace.gifを読み込みます。その画像をクリックし、属性パレットで高さと幅をしています。数は高さを100ピクセル、幅を200ピクセルに指定した例です。
どうです? これで1ピクセル単位で余白を作ることができます。しかもページは軽い!!。テーブル(表)と組み合わせれば、この縦の余白だけでなく、横も余白が自由にできます。
Webページのデザインにテーブルは欠かすことができません。でも、せっかくテーブルの「幅(width)」指定をピクセル単位で指定しても、ブラウザのウィンドウの幅が狭い場合はレイアウトがくずれてしまうことがあります。テーブルのセル幅を確実に固定するには先のspacer.gifを使うといいです。
スペーサgifの応用として、縦線と横線の利用があります。スペーサgifの背景は無色透明ですが、背景色を指定したgif画像を用意して縦線と横線の両方を同じ画像で描きます。
縦横1ピクセルで背景色が黒の画像を用意し、スペーサgifと同じように属性パレットで幅や高さを指定します。下記線は幅500、縦10ピクセルに指定した線です。同じようにして縦線もできます。
文章の先頭に空白をつけるために、スペースをタイプしていることがあります。この方法とは別に先のスペーサgifを使って空白を明けます。この方法だとブラウザーのフォントサイズに関係なく空白がとれます。
10ピクセルのスペースGifを利用しています
20ピクセルのスペースGifを利用しています
50ピクセルのスペースGifを利用しています
100ピクセルのスペースGifを利用しています
Update: Wed, Mar 31, 2004 / 9:36:42 AM