表を使ったレイアウト


 基本
安倍

複数画像やテキスト文を境界線幅ゼロの多行多列の表に挿入することにより、ページ全体をレイアウトできます。
この手法はホームページの世界では広く行なわれています。
その場合のコツは 

 画面幅や、文字サイズへの対応

表幅640ピクセル指定
(画面幅を少々変えても、文章と画像の相対位置はかわらない)
大型液晶の普及で閲覧画面幅はいろいろあるし、老眼の人は文字の大きさを「大」にしている場合が多い。
文字の大きさを「大」に設定すると、文字の大きさは大きくなるが画像の大きさは変わらない。
その結果、文章と画像の相対位置関係は閲覧者によって大きく変わることがある。

何枚もの写真が入った紀行文の場合、レイアウトに注意しないと本文とは無関係の位置に写真が入った状態で閲覧することも生じる。

いろいろな閲覧環境においても文と画像の相対位置関係があまりズレないようにするためには指定表枠内に文章を入れればよい。 ただし表幅を広くとりすぎると表内文書が画面右からはみだし、横スクロールしないと見えなくなる。

これを防ぐには、 閲覧者の画面最小幅は、15インチ液晶で左に「お気に入りメニュー」がある場合と想定して表幅を800ピクセル以下程度にすればいい。

このように1行1列の表を利用すれば文字サイズや画面幅が少々変わっても相対位置関係は大きく崩れることはない。
さらに、厳密にする場合は表内の適当な位置で改行し、表内全体を「折り返し禁止」にすれば改行位置も文字の大きさに関わらず一定になる。 ただし改行位置まで指定すると少々見苦しくなる。


「折り返し禁止」設定 あるいは
preformat 指定

この枠内は、文字の大きさを変えても表幅が拡大するので改行位置は変わらない。 したがって、
文章と画像 の相対位置関係はかなり厳密に保たれる。 ただし行右側は不揃いになる。

preformat 指定した場合も、表幅よりも改行位置が優先されて表幅が拡大する。
DreamWeaver ではpreformatが自動挿入されることがあるのでコード編集で削除すべし。


大型液晶の普及で閲覧画面幅はいろいろあるし、老眼の人は文字の大きさを「大」にしている
場合が多い。

文字の大きさを「大」に設定すると、文字の大きさは大きくなるが画像
の大きさは変わらない。
その結果、文章と画像の相対位置関係は閲覧者によって大きく変わ
ることがある。
何枚もの写真が入った紀行文の場合、レイアウトに注意しないと本文
とは無関係の位置に写真が入った状態で閲覧することも生じる。

いろいろな閲覧環境においても文と画像の相対位置関係があまりズレ
ないようにするためには指定表枠内に文章を入れればよい。ただし表幅を広くとりすぎると表内
文書 が画面右からはみだし、横スクロールしないと見えなくなる。

これを防ぐには、閲覧者の画面最小幅は、15インチ液晶で左に
「お気に入りメニュー」がある場合と想定して表幅を800ピクセル以下
程度にすればいい。
このように1行1列の表を利用すれば文字サイズや画面幅が少々
変わっても相対位置関係は大きく崩れることはない。
さらに、厳密にする場合は表内の適当な位置で改行し、表内全体を
「折り返し禁止」にすれば改行位置も文字の大きさに関わらず一定になる。
ただし改行位置まで指定すると少々見苦しくなる。

 表幅指定よりも、改行禁止が優先される

表幅ピクセル指定の場合
表幅をピクセル数値で指定して、
長い文章を挿入すると表内で自動改行される。
あるいは閲覧者が文字の大きさを「大」にした
場合も指定表幅内で改行される。
ただし、改行禁止した場合は表幅よりも改行禁止
を優先して表幅が拡大する。


表幅%指定の場合
表幅を%値で指定した場合も、
長い文章を挿入すると表内で自動改行される。
あるいは閲覧者が文字の大きさを「大」にした
場合も指定表幅内で改行される。
ただし、改行禁止した場合は表幅よりも改行禁止
を優先して表幅が拡大する。
表幅%指定の場合は文字サイズによっては
一定範囲で表幅は変化する。


 文字サイズの固定(Internet Explore のみ対応)

この表枠内を Internet Explorerで、文字サイズ「大」にして閲覧してください。
Internet Explorer の場合は 文字サイズは変化しないことが分かります。

閲覧者がブラウザの設定で文字サイズを「大」にすると、文字表示は大きくなるが
画像の大きさは変わらない。  その結果、文章と画像 の位置バランスが変わり、
レイアウトに影響する。
あるいは、表枠が拡大してレイアウトに影響することもある。
特に Homepage Builder の「どこでも配置モード」や「スライス処理」で作成した
レイアウトは位置関係が微妙に崩れる。
これを防止する方法として、閲覧者による文字サイズ「大」の指定を無効にする方法がある。

方法: スタイルシートで、文字サイズをpixcel で指定する。
ただし、この方法は Internet Explorer にしか有効ではない。 他のブラウザでは無効である。

この手法は 文字サイズを「大」にしないと見えない閲覧者に対して、いささか配慮に欠ける
が、凝ったレイアウトの表紙には多く使われている。

 

 ページ全体を中央にする

<BODY>
<!-- ★★以下4行 ページ全体のレイアウト表設定 -->

<div>
<table bgcolor="#FFFFFF" id="03" width="873" align="center">
<tr>
<td width="865" height="825" valign="top">

  *
  *
  *
  *

<!--  以下4行 全体table 閉め  ////// -->

</td>
</tr>
</table id="03">
</div>

</BODY>

 ブラウザの違いによるレイアウト調整
Internet Explorer/ GoogleChrome / FireFox によってレイアウトが異なる場合がある。 表配置でInternet Explorer で中央配置が他のブラウザで左寄りになる場合は、
  <table > の前に <div align="center">  </table >の後に </div>
を置くことで解決する。

 スタイリッシュ イフェクト (ホームページビルダー) 

ホームページビルダーで表を使うレイアウトとしては以下の2つの方法がある。

 ネット情報 (リンク) 

表の各種加工  超初心者のためのホームページ作成講座


表に影をつける簡単テクニック

上と左に細い行と列
下と右に影の行と列
右上と左下に空白背景のセル

 

 

 


     

| ホームページ作成体験メニューに戻る |

 

 

 

 

 

 

 

 

 

 

 

inserted by FC2 system