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

VOL5.テーブルの有効活用　その1.マージン指定に利用する

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

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

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

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

余白

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

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

余白

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

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

つまりどんな幅のディスプレイで表示しても、必ずディスプレイ幅１００パーセントで表示して、尚且つ両側に50ピクセルの余白を固定して表示してくれるわけです。ウィンドウを縮小表示にした場合はウィンドウの幅に合わせて改行します。最近、横幅がワイドなディスプレイもありますが、その場合はユーザーがウィンドウ幅を調節することによって、読みやすい幅を選ぶことが出来ます。但し、自動的に幅を調節させるためには、表全体や中央セルの設定に幅や高さを指定してはいけません。高さも幅も指定のない時に限って、ブラウザのウィンドウ幅に合わせた調節が行われるからです。もし中央セルの幅を1000ピクセルで指定したとしましょう。そうすると、ブラウザはその指示に忠実に従いますので、800ピクセルの幅しかないディスプレイでは、横スクロールしないと全部のテキストを読めなくなってしまいます。また逆に中央セルに600ピクセルを指定したとすれば、例え1200ピクセル幅のディスプレイで見ても画面全体の600ピクセル分しか使わずに表示してしまいます。これでは余白の意味がありませんよね。

HPを作成している画面でテーブルを触っていると、たまに誤まって罫線をスライドさせてしまうことがありますが、こうすると自動的に幅や高さが指定されてしまうので注意するようにしましょう。誤まってスライドさせてしまった時には、ショートカットの「元に戻す」ボタンをクリックして、１作業分戻せば指定が解除されます。

また、このようにページ全体のマージン指定にテーブルを使う場合、以下の点に配慮して下さい。

HTMLでは例えば上の表の場合、以下のように記入されているわけですが、

<table border="3" cellpadding="0" cellspacing="0">
<tr>　...//表全体の指定

<td nowrap width="50">
<p align="center"><b>余白</b></p>
</td>　...//左のセルを指定

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

<td nowrap width="50">
<p align="center"><b>余白</b>
</td>　...//右のセルを指定

このうち、<div align="center"><center> 、</center></div>が表全体を中央に表示する指定となっており、<table...><tr>　</tr></table>が表そのものについての罫線幅などの指定になっています。そして<td nowrap width="50"></td>、<td></td>、<td nowrap width="50"></td>で各セルに関しての指定が行われていて、内容はそれぞれの間に挿入されていることになります。

先ほどの両側のセルに「折り返しなし」を指定するというのは、フロントページの場合は該当するセルにカーソルを置いた状態で右クリックし、「セルのプロパティ」画面で「折り返しなし」という項目にチェックマークを入れれば自動的に記入されますが、HTMLに直接書き込む場合は、<td nowrap width="50">で指定されている中にあるように、nowrapという文字を挿入します。そしてwidthの後の数値部分に、余白を空けたいピクセル数を記入して下さい。つまりHTMLのこの部分は「幅50ピクセルを折り返しなしで表示して下さい」という意味で、結果的には５０ピクセル分の余白が空くことになります。この「折り返しなし」= nowrapを入れないで幅だけ指定しても、セルが空白の場合は作成ソフトやブラウザによっては表示に反映されないことがあり、その場合は余白は空きません。

では、このあたりを参考にワンランク上のレイアウトを試してみて下さいね。スタイルシートでのやり方は、またそちらの項目で説明したいと思います。