崩れにくい表のレイアウト法|
崩れにくい表のレイアウト法 |
| 透過gifを使うテクニック |
表を使ってレイアウトを始めると、セルの大きさが思うように固定できず、レイアウトが崩れてしまうことがあります。 |
|||||||||||||||||||
|
左のように３列5行でできているレイアウトは、画像の大きさも様々で、画像の大きさとセルの大きさの差があるために、表が自由に伸縮してしまい、どうしてもレイアウトが崩れがちになってしまう。 |
||||||||||||||||||
|
まず、幅を固定するために、それぞれの列の先頭行に透過gif画像を挿入し、それぞれの幅の大きさに指定する。 透過ファイルなので透明だが、ここでは、わかりやすくするために赤い線で表すことにする。位置もわかりやすいように下にずらしてあるが、本来はセルの上の枠にぴたっとつけて挿入する。 1×1ピクセルの透過gifを貼り付け、左右のセルは 高さ1ピクセル幅150ピクセルの大きさにその画像サイズを変更する。 中央の列も同様に先頭行に透過gifを貼り付け、サイズを高さ1ピクセル幅300ピクセルに指定する。 細長い横棒のようになった透過gif画像はセルの幅の突っ張りとなり、画像が入っているため それ以上はセルの幅は今までのように自由に縮まることはない。 |
||||||||||||||||||
|
高さを固定する場合は、 最上行のセルと次のセルの間隔を固定の高さで空けるため、スペース行をもう１行挿入し、そのセルに透過gif画像をはりつけ、今度は幅は1ピクセルで高さを希望の30ピクセルのサイズに指定する。 gif画像はわかりやすくするために緑色にしてある。 透明なサイズを固定できる画像を入れることにより、セル間の縦の位置につっかえ棒ができ、それ以上 高さは縮まることはない。 |
||||||||||||||||||
|
|
|||||||||||||||||||
|
【透過gifをいれたレイアウト】 これは、透過gif（赤い線と緑の線にしてある）をつっかえ棒として指定の幅に固定してあるので、画像の幅よりセルの幅が小さくなることはないので、セル内の文字は指定の幅を超えると自動的に折り返され、レイアウトは保たれます。
↑実際には この表の外枠も0表示にします。
|
|||||||||||||||||||
|
【透過gifの設定の仕方】 ＊あらかじめ spacer.gif はimgフォルダに入れておきます。 表の挿入箇所（トップ行のセルの一番上）にカーソルを置いて、ツールバーより画像 
をクリック画像の場所 に img/spacer.gif と入力して 代替えテキストに適当な名前を付けます。 つづいて 上部の「サイズ」を選びます。 |
||||||||||||||||||
|
ウインドウ上部の「サイズ」を選んでタブを切り替えます。 ◎ユーザー定義のサイズを選び □制限 のチェックを外し、 幅 を 150 ピクセル （固定したい幅） 高さ を 1 ピクセル にして OKを押すと 細い棒のような線がカーソルのある箇所に挿入されます。 ＊高さを固定する場合は、 ユーザー定義のサイズのところで 幅を１ピクセル 高さを 固定したい高さの数値を入力します。 |
||||||||||||||||||
|
|
|||||||||||||||||||
【実際の仕上がりはこんな感じ】
|
|||||||||||||||||||
|
|
|||||||||||||||||||
| [HOME] |
|||||||||||||||||||
