TABLEの高さを固定したいのですが…

現在TABLEタグを利用してHPのレイアウトを作成しているのですが
高さが固定できずに困っています。

ソースですが
<table border="0" cellpadding="0" cellspacing="0" width="600" height="800">
<tr>
<td width="300" height="600" background="img/back1.jpg" align="left" valign="top">
<p>【１】</p>
</td>
<td rowspan="2" align="left" valign="top" width="300">
<p>【２】</p>
</td>
</tr>
<tr width="300">
<td background="img/back2.jpg">【３】<img src="img/back2.jpg"></td>
</tr>
</table>

これで
┌───────────────┐
│　　　　　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
│　【１】　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
├─────┤　　　　　　　　　│
│　　　　　│　　　【２】　　　│
│　　　　　│　　　　　　　　　│
│　【３】　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
│　　　　　│　　　　　　　　　│
└─────┴─────────┘

という形を作成したいと考えています。

この時【１】は高さ600pxの固定サイズで、【２】に画像や文章が追加され縦に伸びるたびに【３】に設定してある背景画像（background="img/back2.jpg"）がループしながら縦に伸びていくようにしたいと考えています。

ところがIE8以降で確認すると、【１】が固定されずに【２】に合わせてどんどん伸びてしまいます。
逆に【３】が固定されているようです。

別にテーブルを使用しなくても【１】だけが固定されて【２】と【３】が内容によって同時に動き、かつ【３】の背景が伸びていけば構わないので「別のやり方があるよ」というアドバイスだけでも頂ければと思い質問させていただきました。

よろしくお願いします。

No.10 回答者： ORUKA1951 回答日時： 2011/06/04 09:47

忙しいときに限って気晴らしでこんなことしている。

3カラムのCSSを追加・・最もよく見かけるデザインかも。
違うのは
・カラムの配置にfloatを使ってないので、本文中で挿絵(figure)にfloatが使える。
・リキッドデザインでsectionの最大サイズ(900px)までウィンドウ幅に追随

HTMLのHEAD内に
<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS2/3column.css" title="３分割">
を追加、印刷用の上あたり

【CSS】［3column.css］
@charset "Shift_JIS";
/* 代替スタイルシート(３分割) */
div{border:solid 1px Gray;}
div.header{text-align:center;height:130px;padding:15px 25% 5px 25%;}
div.header h2{display:none;}
div.summary{text-align:left;}
div.chapter{padding-bottom:0;}
div.chapter div.section{width:70%;margin:0 auto;max-width:900px;position:relative;}
div.section div.article,
div.section div.nav,
div.section div.aside{position:absolute;font-size:0.8em;width:20%;}
div.section div.nav{top:0;right:100%;height:240px;}
div.section div.article{left:100%;top:0;background-color:Yellow;}
#siteMap{position:absolute;top:0;width:100%;left:0;margin:0;padding:0;}
#siteMap ul,#siteMap li{display:block;list-style:none;margin:0;padding:0;line-height:14px;}
#siteMap ul li{width:18%;float:left;padding:2px;margin:0 2px;}
#siteMap ul li a{display:block;height:100%;width:100%;text-decoration:none;text-align:center;background-color:white;}
#siteMap ul li a:hover{background-color:Yellow;}
div.W3C_Valid{position:absolute;top:25px;right:5px;width:100px;text-indent:0;}
div.W3C_Valid p{display:inline;}
div.chapter{background-color:transparent;}

この回答へのお礼

丁寧に教えていただき、ありがとうございます。
すぐにはわからないとは思いますが、参考にさせていただきます。

ありがとうございました＾＾

お礼日時：2011/06/06 14:27

No.9 回答者： mikemike7 回答日時： 2011/06/04 08:38

今回の質問内容はあくまでも、テーブルの高さを固定させる手段、または同じようなレイアウト構成について質問されているわけですよね？

ORUKA1951さんが今回提示した内容でそれは解決するのでしょうか？
問題解決させようという気があるなら、今回質問者さんが提示されたソースをもとに、同じような枠組みで表示させる手段を提示し、説明するのが普通な流れではないのでしょうか。
これでは、テーブルの高さを固定させるアドバイスというよりもHTML全体に対する講義のように感じます。

ORUKA1951さんは、テーブルを使った手段に対し、こういっています。
>いまどき、そのような作り方をする人がいらっしゃるとは驚愕です。
これまでにも他の質問スレッドで表以外のテーブルタグを使った質問には必ずといって良いほど何度も指摘されています。
指摘はしても、解決の為のソース提示はあまり見たことがない気がしますが...。

まあ、各個人の考え方が違うわけで、表以外ではテーブルタグは使わないことが正しいことなのでしょうが、”今の時代”でもTABLEタグを使っているサイトはいくらでもあります。

それは初心者が作ったページだけでなく、Yahoo!や楽天、価格.com、OKWave、教えて！gooなどの大手サイトでもレイアウト・デザインの為にテーブルタグは未だに使われています。

段落タグやリストタグを使うよりテーブルタグでレイアウトしたほうが格段に楽なことは事実だし、特に初心者にとって、テーブルタグを使わないで構築することは困難な場合が多いでしょう。
# 私は基本的にテーブルタグは使わないですよ

結局WEBサイトを構築する上で、良いモノを提供しようと思えばキリがない。
完璧を目指して作り上げることも、見栄え重視で作り上げることも結局自己満足の問題ではないでしょうか。

いつの時代でもアンチは必ずいます。
JavaScriptはOFFにしてたら動かないことがあるから使うな。
リンクターゲットを新規ウィンドウで開くのはおかしい。
など、挙げてたらキリがない。

閲覧者に考慮する気持ちはとても大事だろうし、全ての方に合わせた作りをすることは素晴らしいことでしょう。
でもそれは各作成者の自由であって、根本的に否定するのはどうかと思いながらいつも拝見しています。

質問する前に根本的にHTMLを見直せ。
ということは、質問する前にググレよ。
と指摘することとどう違うのでしょう？

指摘することで正しいHTMLを勉強しようとする方もいるでしょうが、今回のように主旨から大きく離れたり、問題が解決しないことも多々ではないですか？
問題があって質問しているわけで、それを解決させる手段（ソース）を提示するか、”問題に対する改善案”を提示してあげるのが”回答”であると私は思います。

話が少し反れましたが、人それぞれ求めるモノが違うわけで、閲覧者のほとんどはHTMLソースなんて見ません。
閲覧者の中には正常に見えない方もいるかもしれませんが、それは作成者側の取り組み方の問題であって、作成者がやりたいことを実装できればそれで良いのではないかと思います。

まずは出来ることから改善していくことが大事だと思いますし、改善しようとする気持ちこそが今後のスキルアップに繋がると思います。
HTMLやCSSなどの完璧を目指すことも大事でしょうが、もっと大事なことはWEBサイトの内容であって、いきなり完璧を目指して多くの時間を費やすよりは、その時間を使ってコンテンツを充実させたほうが良いと思います。
HTML的に完璧だけど、中身がスカスカのWEBサイトを見て素晴らしいとは思えないわけですし。

何せよ、とりあえず今回の問題は、
No2、もしくはNo4のソースでうまくいくと思いますよ。

長文失礼しました。

この回答へのお礼

丁寧にありがとうございます。
教えていただいたテーブルの件ですが、自分が画像の指定を間違っていたようで
再度確認したところ問題なく動きました。

スタイルシートの方も参考にさせていただきます。
本当にありがとうございました＾＾

お礼日時：2011/06/06 14:29

No.8 回答者： ORUKA1951 回答日時： 2011/06/04 00:53

HTMLソース中のURLはこのサイトの仕様で、ちょん切れているので、

＿＿＿<blockquote title="HTML4.01仕様書(邦訳)" cite="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
というふうに、
　以下の＿はタブに、Ｈttpはhttpに置換してね。


＿＿＿<blockquote title="HTML4.01仕様書(邦訳)" cite="Ｈttp://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1">
＿＿＿＿<p>
＿＿＿＿HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
＿＿＿＿</p>
＿＿＿</blockquote>


＿＿<div class="W3C_Valid">
＿＿＿<p>
＿＿＿＿<a href="Ｈttp://validator.w3.org/?#validate_by_input" title="Valid HTML 4.01!"><img src="Ｈttp://www.w3.org/Icons/valid-html401"
＿＿＿＿ alt="Valid HTML 4.01!" height="31" width="88" style="border:0;width:88px;height:31px"></a>
＿＿＿</p>
＿＿＿<p>
＿＿＿＿ <a href="Ｈttp://jigsaw.w3.org/css-validator/#validate_by_input" title="Valid CSS!"><img style="border:0;width:88px;height:31px"
＿＿＿＿ src="Ｈttp://jigsaw.w3.org/css-validator/images/vcss"
＿＿＿＿ alt="Valid CSS!" height="31" width="88"></a>
＿＿＿</p>
＿＿</div>

No.7 回答者： ORUKA1951 回答日時： 2011/06/04 00:39

[HTML続き]

＿<div class="footer">
＿＿<div class="W3C_Valid">
＿＿＿<p>
＿＿＿＿<a href="http://validator.w3.org/?#validate_by_input" title="Valid HTML 4.01!"><img src="http://www.w3.org/Icons/valid-html401"
＿＿＿＿ alt="Valid HTML 4.01!" height="31" width="88" style="border:0;width:88px;height:31px"></a>
＿＿＿</p>
＿＿＿<p>
＿＿＿＿ <a href="http://jigsaw.w3.org/css-validator/#validate_by_ … title="Valid CSS!"><img style="border:0;width:88px;height:31px"
＿＿＿＿ src="http://jigsaw.w3.org/css-validator/images/vcss"
＿＿＿＿ alt="Valid CSS!" height="31" width="88"></a>
＿＿＿</p>
＿＿</div>
＿＿<div class="nav" id="siteMap">
＿＿＿<ul>
＿＿＿＿<li><a href="index.html">トップ</a></li>
＿＿＿＿<li><a href="./product/">製品情報</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
</body>
</html>

【CSS】[default.css]
@charset "Shift_JIS";
/* 固定スタイルシート */
html,body{margin:0;padding:0;line-height:1.2em;}
p{text-indent:1em;margin:0.5ex 0.5em;}
blockquote{border:dotted 1px gray;}
【CSS】[std_shape.css]
@charset "Shift_JIS";
/* 標準スタイルシート(外形) */
div{border:solid 1px Gray;}
div.header,div.chapter{margin:0 auto 0 0;max-width:1020px;padding-left:200px;}
div.header div.summary{margin:0 1em;}
div.header h1{text-align:center;}
div.chapter div.section{min-height:300px;}
div.summary h2,
div.section div.nav h3,
div.section div.article h3{display:none;}
div.section div.nav,div.article{position:absolute;width:200px;left:0;font-size:0.8em;}
div.section div.nav{top:0;height:240px;}
div.article{top:240px;}
div.W3C_Valid{position:absolute;top:10px;right:5px;}
div.W3C_Valid p{display:inline;}

【CSS】[std_color.css]
@charset "Shift_JIS";
/* 標準スタイルシート(色) */
div.header{background-color:Aqua;border-color:Aqua;}
div.header div.summary{background-color:white;border-color:white;}
div.chapter{background-color:Yellow;border-color:Yellow;}
div.section div.nav{background-color:Lime;border-color:Lime;}
div.section{background-color:Silver;border-color:Silver;}
div.section div.article{border-color:Yellow;}
div.W3C_Valid{border-color:Aqua;}

【CSS】[revers.css]
@charset "Shift_JIS";
/* 代替スタイルシート(反転) */
body{color:white;}
div.header{background-color:rgb(40,40,0);border-color:rgb(40,40,0);}
div.header div.summary{background-color:black;border-color:black;}
div.chapter{background-color:rgb(0,0,60);border-color:rgb(0,0,60);}
div.section div.nav{background-color:rgb(40,0,40);border-color:rgb(40,0,40)}
div.section{background-color:gray;border-color:gray;}
div.section div.article{border-color:rgb(0,0,60);}
blockquote{border-color:black;}

【CSS】[small.css]
@charset "Shift_JIS";
/* 代替スタイルシート */
div{border:solid 1px Gray;}
div.header{height:130px;}
div.header h1{text-align:center;}
div.header div.summary{margin:0 1em;}
div.header div.summary h2{display:none;}
div.chapter div.section{position:relative;}
div.chapter div.section div.nav{font-size:0.9em;position:fixed;top:130px;width:100%;}
div.chapter div.section div.nav h3{margin:0.2em;text-align:center;}
div.chapter div.section div.nav ul{display:block;text-align:center;}
div.chapter div.section div.nav li{display:inline;list-style:none;margin-left:2em;}
div.chapter div.section{padding-top:80px;}

【CSS】[print.css]
@charset "Shift_JIS";
/* 印刷用スタイルシート */
#siteMap{display:none;}
h1{text-align:center;}
div.header div.summary{margin:1em 3em;}
div.W3C_Valid{margin:10mm;}
div.W3C_Valid img{display:none;}
div.W3C_Valid a:before{content:"★このページは、"attr(title) "でチェック済み";}
div.chapter{margin-top:50mm;}
div.nav{position:absolute;top:45mm;}
div.article{margin:1em 2em;border:solid 1px gray;}
blockquote:after{content:attr(title)"( "attr(cite)" )";font-style:italic;font-size:0.8em;}
div.header{background-color:white;border-color:white;}
div.header div.summary{background-color:white;border-color:white;}
div.chapter{background-color:white;border-color:white;}
div.section div.nav{background-color:white;border-color:white;}
div.section{background-color:white;border-color:white;}
div.section div.article{border-color:white;}
a{color:black;text-decoration:none;}

No.6 回答者： ORUKA1951 回答日時： 2011/06/04 00:28

適当なサンプルがなかったので、簡単に作ってみた。

味噌は【3】の背景は実際には<div class="chapter"の背景だということです。ここで開始位置を指定してrepeat-yで背景はつながる。HTML4.01strict(実質XHTML1.0strictと同じ)
　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )でもチェック済み
　すべてのソースにある＿はタブに置換してください。

　スタイルシートは同じディレクトリにCSS2というフォルダーを作ってすべて入れてください。６枚あります。スタイルシートはメンテナンス時に見渡せるよう可能な限りセレクタはグループ化し、極力改行は減らしてあります。また後で追加するスタイルとバッティングしないよう、セレクタの詳細度を上げてあります。
　代替スタイルシートはブラウザの表示メニューから、印刷イメージは「印刷プレビュー」で確認してください。
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:[e-mail]" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" type="text/css" href="./CSS2/default.css">
＿<link rel="stylesheet" type="text/css" media="screen" href="./CSS2/std_color.css">
＿<link rel="stylesheet" type="text/css" media="screen" href="./CSS2/std_shape.css" title="標準">
＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS2/small.css" title="小さな画面用">
＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS2/std_shape.css" title="反転">
＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS2/revers.css" title="反転">
＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS2/print.css" title="印刷見本">
＿<link rel="styleSheet" type="text/css" media="print,handheld" href="./CSS2/print.css">
</head>
<body>
＿<div class="header">
＿＿<h1>サンプル</h1>
＿＿<div class="section summary">
＿＿＿<h2><a name="summary">要約</a></h2>
＿＿＿<p>HTMLは文書構造にしたがってマークアップし、そのHTMLのプレゼンテーションをCSSで表現するという基本を説明しています。</p>
＿＿</div>
＿</div>
＿<div class="chapter">
＿＿<div class="section">
＿＿＿<h2><a name="HTML_CSS">HTMLとCSSの関係</a></h2>
＿＿＿<p>「どのように表示するか」を念頭においてHTMLを書いてしまうとHTMLだけでなく、CSSもいびつなものになってしまいます。</p>
＿＿＿<p>HTMLは文書構造にしたがってマークアップするもの。CSSはどのように表現するかを記述するものと切り分けると良いでしょう。</p>
＿＿＿<blockquote title="HTML4.01仕様書(邦訳)" cite="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
＿＿＿＿<p>
＿＿＿＿HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
＿＿＿＿</p>
＿＿＿</blockquote>
＿＿＿<h2><a name="markup">文書構造をマークアップとは</a></h2>
＿＿＿<p>具体的に見て行ったほうが早いでしょう。(オーサリングツール由来と思われる)極めてよく見かける&lt;div id="wraper"&gt;とか、&lt;div class="left"&gt;とか、&lt;div class="contener"&gt;など、後で意味のわからないclass名はつけず、一般的なclass名にしましょう</p>
＿＿＿<p>きちんとマークアップさえ、されていればCSSだけ見ながら変更できます。ためしにお使いのブラウザの[表示メニュー]から[スタイルシート]を選択して、様々なスタイルシートを選択してみてください。</p>
＿＿＿<p>このように、HTMLが文書構造にしたがって正しくマークアップされていれば、CSSはその真価を発揮できるのです。</p>
＿＿＿<div class="article">
＿＿＿＿<h3>メモ</h3>
＿＿＿＿<p>
＿＿＿＿＿このサンプルの文書解析木とまったく異なる、たとえば div.section&gt;div.articleがfooter内やbody直下にあるなどしても、それなりに配置ができるでしょう。肝心なことは、学校時代に国語で行った文章の解析が容易なようなマークアップをすることですね。
＿＿＿＿</p>
＿＿＿</div>
＿＿＿<div class="nav">
＿＿＿＿<h3><a name="table_of_contents">このページの目次</a></h3>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="#summary">要約</a></li>
＿＿＿＿＿<li><a href="#markup">文書構造をマークアップとは</a></li>
＿＿＿＿＿<li><a href="#HTML_CSS">HTMLとCSSの関係</a></li>
＿＿＿＿</ul>
＿＿＿</div>
＿＿</div>
＿</div>
・・・・以下は別途・・・・

No.5 回答者： ORUKA1951 回答日時： 2011/06/03 12:11

＞もし差し支えなければ教えて頂ければと思います。

　了解です。
　実は、私も現在自社サイト、個人サイトを書き換え中ですので、その合間を見て使用しているHTMLとCSSのテンプレートを紹介しましょう。
　ちょっと時間をください。

No.4 回答者： mikemike7 回答日時： 2011/06/03 11:49

>こちらは「背景だけが置いてある<td>の上に文章を置く」という事ですよね？

質問内容の意図からは、【２】の高さが大きくなって、【１】＋【３】の合計の高さを超えた場合に、【１】はそのままの高さで、【３】だけを延長したいと感じました。
テーブルの高さが増えた場合、【１】の高さはそのままで、【３】の背景画像は伸ばしたいんですよね？
だからTDに【３】の背景画像を入れ、【１】の入ったDIVは高さ固定とし、【１】用の背景画像を入れています。
これで、テーブルが伸びた場合でも【１】の高さは固定で、TDだけが伸び、背景画像も伸びることになります。

>状況によっては背景でおいた画像とループさせた背景がずれてしまうんです＞＜
どういう状況でしょう？背景で置いた画像とループさせた背景って何だろう。
細かなレイアウトは、今回の質問内容にも含まれているんです？
こういう形で実装したいということかと思っていますが。

>NO.2の方と同じやり方ということでしょうか？
違うように感じます。
私の表で言うと、Aの中に更にテーブルを入れ、その中に、【１】と【３】を入れるという記載のように思います。
ですが、それだと、３の背景画像は伸びませんよね。

>シンプルさが全然違ったので
まあ、No３の方が完璧なHTMLとCSSで書いてくれるかもしれませんが、参考までに私も載せておきます。

// CSS
#container{width:600px;background-image:url(img/back2.jpg);}
#boxA{float:left;width:300px;}
#boxB{float:left;width:300px;background-color:#ffffff;}
#box1{height:600px;background-image:url(img/back1.jpg);}
.clear{clear:both;}

// HTML
<div id="container">
<div id="boxA">
<div id="box1">【１】</div>
【３】<img src="img/back2.jpg">
</div>
<div id="boxB">
<p>【２】</p>
</div>
<div class="clear"></div>
</div>

No.3 回答者： ORUKA1951 回答日時： 2011/06/02 23:44

＞ただ、CSSを使わない状態でのレイアウト作成が必要だったので質問をさせてい

ただきました。

　質問にはtableを使用しなくても・・とあったので、HTMLさえ正しくマークアップされていれば、どのようにでも表示できると回答しました。
　CSSは文書解析木が正しくないと適用されない・・

　tableは仕様上、高さの配分は最長のセルの高さを決めた後で割り振りますから、IE8だけでなくfirefoxでも同様になるかも・・

　一番簡単な方法は、【1】と【3】だけを含むtableを作成して、【1】の中にもうひとつセルがひとつだけ内容は【2】のtableを作成して【1】に入れてしまうことでしょう。　

・・・tableを使わなければ、逆に簡単な例かもしれませんね。

この回答へのお礼

再回答ありがとうございます。
言葉足らずで申し訳ありませんでした。

NO.2の方と同じやり方ということでしょうか？
firefoxではうまく表示されました…といいますかIE７以前なら問題なかったんですが
そもそもソースに問題があったんですね、勉強しなくては…＞＜

ちなみに、スタイルシートを使用した場合、【３】の大きさに合わせて【２】を
動的に変化させることは可能なんでしょうか？
No.1で答えていただいたものと自分が作ったものを比べると、シンプルさが全然違ったので
もし差し支えなければ教えて頂ければと思います。

よろしくお願いします。

お礼日時：2011/06/03 10:40

No.2 回答者： mikemike7 回答日時： 2011/06/02 19:32

HTML・CSSについて詳しくはないですが...。

今回の質問内容を題材にとって修正するとしたら、
単純に
┌──────────┐
│　　　　　│ 　　　　　　　　│
│　　Ａ　　│　　　【２】　　　│
│　　　　　│ 　　　　　　　　│
└──────────┘
として、
Ａに【１】と【３】を入れれば良いと思います。
【１】はDIVなどを利用して高さ固定に。
【３】は【１】の下に直接書いています。

修正案（未検証です）

<table border="0" cellpadding="0" cellspacing="0" width="600" height="800">
<tr>
<td align="left" valign="top" style="width:300px;background-image:url(img/back2.jpg);">
<div style="height:600px;background-image:url(img/back1.jpg);">【１】</div>
【３】<img src="img/back1.jpg">
</td>
<td rowspan="2" align="left" valign="top" width="300">
<p>【２】</p>
</td>
</tr>
</table>

No1さんの意見は、もっともな話だと思いますし、そうするのが正しいことなのでしょうが、人それぞれWEBサイトを作るに当たり、主旨も違うでしょうし、必ずしも誰もが推奨の手段を完璧に理解できるわけではないと思います。

プロもいれば、初心者だっている。
仕事としてWEBサイトを作っている人もいれば、単純に趣味でやっている人もいる。
人それぞれ考え方は違うものだと思います。

正しい方向性に意識を向けてあげることはとても素晴らしいことだと思いますが、回答する以上、質問内容を解決する手段を提示することは必須なのではないでしょうか。

解決する手段を述べないなら回答するべきではないかと思います。

この回答へのお礼

解答ありがとうございます。

こちらは「背景だけが置いてある<td>の上に文章を置く」という事ですよね？
自分も考えついたのがこの方法だったのですが、状況によっては背景でおいた画像と
ループさせた背景がずれてしまうんです＞＜

…といいつつも、サイズを調整すればうまくいくかもしれないので
うまくはめ込んでみます。

お礼日時：2011/06/03 10:36

No.1 回答者： ORUKA1951 回答日時： 2011/06/02 18:10

いまどき、そのような作り方をする人がいらっしゃるとは驚愕です。

　ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )と、明確に否定されて、１１年・・
　さらに、tdなどにwidthやheightは非推奨です。
11.2.6 表のコマ: TH要素とTD要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　この機会に、ウェブ標準のサイト(HPじゃない)
　 http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% …

HTMLは文書構造をマークアップするものです。そのため、あなたが【1】【2】【3】どのような文章が入るかによってマークアップは変わります。そのため例しか提示できませんが、たとえば
<body>
　<div class="header">
　　<h1>見出し</h1>
　　<div class="section summary"><!-- サマリー要約 -->
　　</div>
　</div>
　<div class="section"><!-- セクション 章/本文 -->
　　<h2>見出し</h2>
　　<p></p>
　　<div class="article"><!-- 完結した記事 -->
　　</div>
　</div>
　<div class="nav"><!-- Navigation -->
　　<ol>
　　　<li><a href=""></a></li>
　　</ol>
　</div>
　<div class="footer">
　</div>
</body>
と正しいマークアップをされた上で、div.navを左上に固定サイズで、その下にdiv.articleを表示し、ページの右側にはdiv.sectionとdiv.footerをたてに並べる。

　と言う風に考えます。

★基本は、
HTMLは文書構造をマークアップするもの
CSSは見栄えを指定するもの
です。きちんとHTMLがマークアップできていれば、将来配置をまったく異なるものに変更するのも簡単です。たとえば、左側にナビゲーションを、articleは左に、本文は中央に、footerはその下に・・・などまったく異なる配置も自在です。

　ですので、あなたがマークアップされたHTMLを示されて、どのように配置するかを聞かれるのが効果的です。HTMLがわからなければ、その内容はどんなものかを示されると、HTMLともども回答してもらえるでしょう。

この回答へのお礼

解答ありがとうございます。
言葉足らずで申し訳ありません、上記のレイアウトはすでにCSSを利用して作ってはあります。
ただ、CSSを使わない状態でのレイアウト作成が必要だったので質問をさせていただきました。

疑問なのはIE8以降で正しく動作しないのがなぜなのか、正しく動作させるためにはどうすればよいのか、という事です。
今時そんなページが必要なのか、という事もあるかとは思いますが、そのあたりはとある事情がありますので伏せさせてください。

お礼日時：2011/06/02 19:21