ホームページを作ろうヨ!!

★★同じ内容でも余白を指定しない場合、こんなせせこましい表示になります。★★

ここでは、見栄えのいいレイアウトについて考えてみたいと思います。

まず個人のホームページでは、よくテキストや画像が中央寄せで表示されているもを見かけるのではないでしょうか。それはそれで良いのですが、どうも画面がワンパターンになりがちなように思います。そこでテキストや画像を右寄せ、左寄せするなどして画面に変化を持たせてみたいところですが、単に端に寄せるだけでは表示された時にあまりにもブラウザのウィンドウ枠に文字や画像が接近しすぎていて、見た目がとても醜くなってしまいます。そこで上下、左右に余白（マージン）を設定して、キレイにレイアウトするわけです。

しかしここでひとつ問題があります。実はフロント・ページでは、独自に余白を設定する機能があるのですが、これはIEでは正しく表示されるものの、他のブラウザではスクリプトが無視されて、意図した通りに表示されないという問題が起こる場合があります。例えばNetscapeではウィンドウ枠ギリギリまで文字が寄ってしまい、何も指定していないのと同じ状態になってしまうのです。そこで、そのような危ない機能は始めから使わず、テーブル（表）を活用することでこの問題を解決してみましょう。

このページも実際は３列の表の両側の列にそれぞれ５０ピクセル幅を指定して、どのようなブラウザやディスプレイで見ても必ず両側に50ピクセルの余白が空くようにしています。けれども罫線を非表示にしているので、皆さんには見えませんよね? 下は分かりやすく罫線を表示したテーブルの例です。

余白

ここにテキストや画像を配置してゆきます。この表はあえて罫線を表示するように指定していますが、このページ全体に指定された表には罫線を表示しないように設定してありますので皆さんには見えていません。つまりこの見えている表は、ページ全体に設定された表の中央セル部分に挿入されているわけです。このように表の罫線を非表示にすると中央のセルに配置された文字や画像だけが表示されて、ブラウザで見たときには左右に余白が空いているように見えるわけです。

上部の余白に関しては、一行目に何も書かずに改行を指定するだけでスペースが空きます。

余白

さて、このテーブルは単にレイアウトを指定するのみならず、ディスプレイに合わせて幅を自動調節してくれるので改行に頭を悩ます必要もありません。どういうことかと言うと、例えば今見いてるこのページを縮小表示にして、幅をスライドさせてみて下さい。

ね? ウィンドウの幅に合わせて、中央セル部分の文字が、勝手に改行されて表示されるでしょう?

つまりどんな幅のディスプレイで表示しても、必ずディスプレイ幅１００パーセントで表示して、尚且つ両側に50ピクセルの余白を固定して表示してくれるわけです。ウィンドウを縮小表示にした場合はウィンドウの幅に合わせて改行します。最近、横幅がワイドなディスプレイもありますが、その場合はユーザーがウィンドウ幅を調節することによって、読みやすい幅を選ぶことが出来ます。。。。。