|
初級篇★ページ作りの基礎知識1. HTMLを書いてみよう VOL4.テーブルの基本 その３ ★ サイズを指定する
さて、こうしてテーブルが作成出来たら、今度は表全体やセルの大きさを指定したい場合が出て来ると思います。これにはピクセル数で指定するやり方と、表示画面に対する比率で指定するやり方があります。ここではHTMLでどのように書くかを優先して説明していますので、HP作成画面上での操作は、こちらを参照して下さい。 Ⅰ.サイズをピクセルで指定する ⅰ）表全体に対する指定 この場合は目的の表全体に対する設定ということになりますので、<table>タグ内に書き込みます。例えば下の例では表全体を幅/高さともに100ピクセルで指定しているのですが... この場合のHTMLは、 <table border="2" cellpadding="0" cellspacing="0"
width="100" height="100"> 上記のように<table>タグ内にwidth="数値" height="数値"という形で指定されているのが分かると思います。幅のみの指定ならheightを記述する必要はありませんし、高さのみならwidthを記述する必要はありません。
ⅱ）セルに対する指定 これは<td>タグ内に記述します。例えば下の例ではグリーンで塗りつぶしたセルのみに幅200/高さ80を指定しています。このように一つのセルのみにサイズ指定しても、それに隣接するセル、つまりこの場合はブルーで塗りつぶしたセルが影響されて大きさを揃えているのが分かるでしょう。これは基本的にテーブル全体が四角を維持する性質を持っているためです。 これをHTMLで書くと、 <table border="2" cellpadding="0" cellspacing="0"> このように<td>タグ内にwidth="数値" height="数値"という形で書き込まれています。こちらも、幅のみの指定ならheightを記述する必要はありませんし、高さのみならwidthを記述する必要はありません。
Ⅱ.サイズをパーセントで指定する ⅰ）表全体に対する指定 ①見る側の表示画面に対しての比率を意味する場合と、 ②サイズ指定する表が、その包含されるセルに対する比率を意味する場合があります。 まず①の場合ですが、これはその表が単体で画面上にある場合、つまりその外側にそれを囲む表またはセルがない時に、見る側のブラウザの画面幅に対する比率指定という形で反映されます。 例えば表全体に80%の幅を指定したとすれば、見る側のディスプレイの表示可能限界が1200ピクセル幅なら1200x0.8で、800ピクセル幅なら800x0.8の幅で表示されるように自動調整されます。これは見る側がブラウザを縮小表示した場合にも反映され、従ってブラウザの表示可能枠の大きさに応じて表の大きさも変わります。 Sample1 の表は、幅80%、高さ60%を指定した例ですが、実際にどのように幅が変化するか、ご覧になってみて下さい。HTMLでは、以下のように<table>タグ内にwidth="80%" height="60%"と、数値に%をつけて記述します。セルの場合もこの要領で、<td>タグ内に書き込めばOKです。 <table border="2" cellpadding="0" cellspacing="0"
width="80%"
height="60%">
②は、サイズ指定しようとする表が、更に大きな表の中のひとつのセル内にある場合です。この時は目的の表が包含されるセルに対する比率ということになります。下の例ではピンクの表は独立したひとつのテーブルで、それが更に大きな黄色い表の中のセルに包含されています。こうした場合にピンクの表に例えば下のように幅50%を指定すると、その包含されるセルを100%として、それに対する比率50%で表示されます。
<table border="2" cellpadding="0" cellspacing="0" width="200" height="200" bordercolor="#FFFF00"> この例では、外側の黄色いテーブルの大きさを幅、高さとも200ピクセルで指定して固定してありますので、ブラウザを縮小してもこの大きさは変わりません。従って、その中にあるピンクの表の大きさも変わりません。外側がⅰ）のサンプルのように%で指定してあった場合は、表示可能枠によってそれ自体の大きさが変化しますので、ピンクの表もそれに応じて大きさが変わります。なお、内側の表に高さを%で指定した場合、ブラウザによって表示が異なる場合がありますので、この指定を行う場合はブラウザごとに確認した方が良いでしょう。これはSample2でご確認下さい。 また表の中に、幅を%で指定した別の表を入れ込んだ場合の、テキストと表の幅の関係を Sample3 で取り上げてみました。一例ですが参考になると思いますので、ご覧になってみて下さい。
ⅱ）セルに対する指定 この場合は、そのセルが含まれる表全体に対する比率になります。 例えば表全体が1000ピクセル幅の指定を受けていて、横３列あるセルのうちひとつのセルのみに80%を指定したとすれば、そのセル幅は1000x0.8で800ピクセルとなり、残りの二つのセルは余ったスペースを等分して100ピクセルずつの幅に自動的に調整されます。ただし、幅を指定していないセルの内容が自動調整された限界を超えた場合、他のセルがまだ限界幅に達していなければ、内容が超過したセルの幅は他のセルを圧迫して可能な限り広がります。このような場合に幅を固定するには、サイズをピクセルで指定して下さい。 表全体に幅の指定がない場合は、セルのどれか、もしくは全てに幅%が指定してあれば、内容に応じてそれぞれの指定が満たされるようにセルの幅が調整されます。これについては Sample4 をご参照下さい。ただし、ブラウザは常に画面の横幅を表示限界として、内容がそれを超えると自動的に改行されるよう設定されています。従って、その限界に達した場合は、その幅を100%として、各セルの幅が指定に応じて調整されます。高さについてはこれが縦方向に反映されるわけですが、高さ指定については、ピクセル、パーセントのどちらで指定しても以下のような制約があります。
内容が表示可能な幅の限界に達すると、そこで改行されて下に伸びるため、表示内容が指定された高さを超えると、その指定は無視されます。つまり... ・幅指定がある場合は、その幅を限界として改行され下に伸びます。 ・幅指定がない場合でも、ブラウザの幅を限界として、それを超えると自動的に下に伸びます。 高さ指定が反映されるのは、ピクセル、パーセントを問わず、内容が指定範囲内に収まる場合だけだと言えますので、セルに入力する内容が大きい場合は、高さを指定するのは無意味でしょう。ちなみに、横スクロールが出るのは、ピクセルで指定された表の幅、もしくは、挿入されている画像の幅が表示限界を超える場合のみです。
以上のような条件があるため、特にセルに%で高さを指定するとすれば、 ・表の高さが固定されており、 ・セル内容がそれを超えない という前提においてのみ有効だと考えて下さい。 またどのような場合においても100パーセント以上を指定することは事実上意味をなしませんので、例え入力しても実際の表示には反映されません。一般にパーセントによる指定は、「画面や表全体に対してどのくらいの大きさで」という比率的なイメージがある場合に用いるもので、各セルのサイズを固定したい場合や、「表の中で、この行や列だけはこの高さと幅で固定したい」というような場合は、パーセントだと全体に対してその比率で自動調整されて値が変わってしまうため、ピクセルで指定した方が無難でしょう。
***
以上、表のサイズ指定について詳しく説明してきましたが、これとは逆にサイズを指定しないでおくと、 Sample3、 Sample4 でも書いたように見る側の使っているディスプレイやブラウザの表示サイズに合わせて勝手に内容を自動調節してくれるので、特にレイアウトに使用する場合はあえて指定せずにおくのも一手です。目的に合わせて使い分けて下さい。 例えば、これはページ全体のマージン指定に利用する方法をお話する時に書いていますが、これは1行/3列の表の左右を空白のままマージンとして用いますので、左右のセルには幅を設定します。けれども中央のセル幅は指定しません。これは見ている側のディスプレイやブラウザの幅がどれくらいであっても、必ず両側に指定したピクセル分の余白を空け、中央のサイズのみを調整して画面幅100パーセントで表示されるようにするためです。HP作成ソフトによっては、ページ設定で余白を指定できるものもありますが、これはブラウザによって反映されない場合もあるため、どのようなブラウザでもまず間違いなく機能するテーブルを使って、むりやり表示を統一してしまおうというやり方です。 こうしておくと中央のセル内のテキストは表示幅に合わせて自動的に改行されるので、見ている側は読みやすい好みの幅を自由に選択出来ます。ただしもしユーザーの画面幅より広い幅の画像などを用いていれば、画像は中途で改行することが出来ませんから、その画像幅分は横スクロールする必要が生じます。例えば極端な例ですが、中央セル内に横幅1000ピクセルの画像を挿入していたとして、ユーザー側が幅800ピクセルのディスプレイで見ていたら、内容セルには「800-両端の余白50x2=700（ブラウザのワク幅も画面幅から差し引かれるので、実際にはもっと狭い）」の表示領域しかなくなり、1000-700=300ピクセルがはみ出して横スクロールしなければ見れなくなるということになります。テキストの場合は先に書いたように自動改行されますから心配ないですけど、横スクロールは見る側にとって面倒なので画像を挿入する場合はその大きさに注意して下さい。 このような「サイズを指定していないセルの動作」を確認したい場合は、今見ておられるブラウザを縮小表示し、大きさを変えてみて下さい。このページも1行/3列の表の両端に50ピクセルの余白を設定し、中央の部分に内容を記述していますので、ブラウザの大きさを変更しても幅500ピクセル以下にしない限り、両端に50ピクセルずつ余白を持たせた状態でテキストが自動改行され横スクロールは出ないと思います。但し500ピクセル以下にすると、このページで使っている画像の中に幅497ピクセルのものがありますのでその幅を限界として、それ以上は表全体が小さくならず横スクロールが出て来るはずです。 このようなマージン指定に用いる場合の使い方は、こちらで詳しく説明していますのでチェックしてみて下さいまし。
上で書きましたように、サイズ指定のないセルや表では、ブラウザの表示可能画面に合わせて自動的に内容が改行されますが、この改行をしないように指定することも出来ます。それには、 <td nowrap> </td> のように、改行を制限したいセルの<td>タグ内にnowrap と書き込めばOKです。これを書き込んだ時と書き込まない時の状態の違いは、Sample5 で、ご確認下さい。 なお、Front Page の機能を使ってこれと同じ指定をするには、目的のセルにカーソルを置いて右クリックし、「セルのプロパティ」の中の「折り返しなし」という項目にチェックマークを入れます。
※別の方法としては、<nobr> </nobr>というタグでセル内の最も長いテキストをくくれば、そのセル全体を折り返しなしで表示することができます。これは、そのテキストが改行制限なしで表示されることによってその行がセルの最大幅となり、それより短いテキストも全て改行なしで表示される幅が確保されるからです。
★HP作成ソフトでのサイズ指定手順 （Front Pageの場合）★ 目的の表もしくはセルにカーソルを置いて右クリックし、 １.表全体をサイズ指定したいなら「表のプロパティ」 ２.セルひとつをサイズ指定したいなら「セルのプロパティ」
目的のプロパティが出たら、レイアウト項目の「幅の指定」、「高さの指定」のチェック・ボックスをクリックしてチェック・マークを入れ、設定するサイズを入力します。この時、数値を入力するボックスの横に「ピクセル」と「パーセント」という項目があることに注目して下さい。初期設定では「ピクセル」が選択されているためピクセル指定する場合はそのままで良いのですが、パーセントにマークが入っていると表示が違ってきますので、必ず目的の項目にマークされているか確認しておくようにして下さいね。
※複数セルを同じ大きさに設定したい場合は、その全てのセルを選択して右クリックします。こうして「セルのプロパティ」から設定された値は、選択された全てのセルに反映されます。セルの選択はExcelのセル選択と同じで、選択範囲の最初のセルにカーソルを置き、最後のセルまでマウスの左ボタンを抑えたまま一気にドラッグするか、メニューから「表→選択→セル（or列、or行）」の順でクリックします。
|
2002.8.6.-10.10.
2006.5.14+6.25+7.3改稿
★高さ指定について★ 
