商店主さん向けHTMLセミナー windows95&Internet Explorler準拠

A CLUBホームページ-Microsoftインターネットエクスプローラ

ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ 私達はまごころで商売をしているＡClubです！ よろしくお願いします！ 送料、振込料はもちろん当社負担です お客様のリクエストには全力でお応えいたします！ まず、我々の素晴らしい商品の数々を とくとご覧くださいませ！ webmaster:山田一郎

これですと、大きいモニターなら中央に揃い、小さいモニターでも 文字と画像がバッティングすることがありません

A CLUBホームページ-Microsoftインターネットエクスプローラ

ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ 私達はまごころで商売をしているＡClubです！ よろしくお願いします！ 送料、振込料はもちろん当社負担です お客様のリクエストには全力でお応えいたします！ まず、我々の素晴らしい商品の数々を とくとご覧くださいませ！ webmaster:山田一郎

A CLUBホームページ-Microsoftインターネットエクスプローラ

ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ 私達はまごころで商売をしているＡClubです！ よろしくお願いします！ 送料、振込料はもちろん当社負担です お客様のリクエストには全力でお応えいたします！ まず、我々の素晴らしい商品の数々を とくとご覧くださいませ！ webmaster:山田一郎

　もうわかりましたか？紹介文と画像を一行テーブルの中にくくってしまっているのです。 テーブルを多用しすぎると表示がおそかったり、マックなんかだと「ブロークンパイプ」って表示が でたまま読み込みが終わってしまう場合もあります。 実はかくいうkasaya.comもそうです。（汗）紹介する見出しが多すぎてねぇ（苦笑）
でも最小限のテーブルを有効に使用することは、とてもレイアウト上大事なことです。

　たまに参考書によっては、全部をひとつの１×１テーブルに纏めるとレイアウトが落ち着くなんて、 書いてあるのがありますが、僕は推奨しません。少なくとも冒頭はテーブルの指定以外として「見出し」 を出してください。テーブルは全部のレイアウトを読み込まないと内容表示しないですから、 回線の遅い時も、（多くのページが、そうしているように） まず「見出し」だけは見えるように配慮すべきでしょう。

<TABLE>
<TR>	<TD>　　　 </TD> <TD>　　　 </TD>	</TR>
</TABLE>

<TR>で列がはじまり、</TR>で列が終わります。
その中の各項目は<TD>ではじまり、</TD>で終わります。
実際の記述は、このようにすると大変わかりやすくなります。ページソースをみたときに、 ちゃんとテーブル配置が想像できるようにタグ整理しておくのです！ これは上達の秘訣です！

<TABLE> <TR><TD>　⇒外壁 項目１ </TD><TD>　⇒仕切り 項目２ </TD></TR>　⇒外壁 </TABLE>

　もうご理解いただけましたか？項目をふやす時は、どんどん仕切り線をいれればいいのです。

<TABLE>
<TR>	<TD></TD> <TD></TD> <TD></TD> <TD></TD>	</TR>
</TABLE>

<TABLE> <TR><TD>　⇒外壁 項目１ </TD><TD>　⇒仕切り 項目２ </TD><TD>　⇒仕切り 項目３ </TD><TD>　⇒仕切り 項目４ </TD></TR>　⇒外壁 </TABLE>

<TABLE>
<TR> <TR>	<TD>　　　</TD> <TD>　　　</TD> <TD>　　　</TD> <TD>　　　</TD>	</TR> </TR>
</TABLE>

<TABLE> <TR><TD>　⇒外壁 項目１Ａ </TD><TD>　⇒仕切り 項目１Ｂ </TD></TR>　⇒外壁 <TR><TD>　⇒外壁 項目２Ａ </TD><TD>　⇒仕切り 項目２Ｂ </TD></TR>　⇒外壁 </TABLE>

　

　テーブルの中に収めたため、shohin.gifのALIGN="right"とBR CLEAR="all"がなくなったことに 注意してください。レイアウト確認のコツは、はじめはBORDER=1として、 枠を表示させておいて、思うとおりに配置できたらBORDER=0にする！ まさに消しごむで製図の下書き線を消す要領です。 どうですか、今日の目的の配置は表示されましたか？