- 締切済み
ＨＴＭＬで並べるテーブルに関して
いまホームページをつくってるんですが ブログみたいに両サイドにメニュー真ん中に主な書き物という形式で テーブルを三つ横に並べて書いたんですが 真ん中の書きものが増えるにしたがって、両サイドのメニューの文字列がどんどん移動していきます。 どうやったらブログのように両サイドのボックスの位置、そして中の文字の位置を維持できますでしょうか？ 教えてください＞＜
- lapapa_patdzoni
- お礼率31% (14/44)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
後の質問が締め切られているようなので、こちらにサンプル書いておきます。 とにかく最初の第一歩は、良い見本を元に、見よう見まねで書いてみることです。 そのとき、そのサンプルが良いかそうでないかは ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェックしておくこと。 下記サンプルは、上記で検証済みです。HTML4.01strictですから、将来のHTML5にもそのまま変更できます。tableを含め、非推奨な書き方は一切していません。 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:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;}/* おまじないを書いておきます */ body{background-color:gray;}/* わかりやすくするため背景に色を付けておきます。 */ h1,h2,h3,h4{margin:0;line-height:1.4em;}/* 見出しのmarginがはみ出すのを防ぐ */ /* これは、下のborderを消してみると効果がわかる */ div{border:solid 1px red;margin:0;}/* わかりやすくするためすべてのdivに枠線を引きます。 */ /* 同様にわかりやすくするため、それぞれのブロックに背景色を付けておきます。 */ div.header{background-color:aqua;min-height:100px;} div.section{background-color:silver;min-height:400px;} div.section div.section{background-color:white;min-height:0;} div.section div.tableContent{background-color:green;} div.footer{background-color:lime;min-height:100px;} /* ここまで、わかりやすくするため色・枠づけ・高さ--これをしておくとわかりやすいです。 */ /* ただし、borderのサイズだけそのブロックの外周サイズが大きくなっています */ /* 全体のサイズを決めます */ div.header,div.section,div.footer{ width:80%;min-width:640px;max-width:900px; margin:0 auto;/* ウィンドウの中央に */ } body>div.section{position:relative;}/* このdivの子孫要素の位置基準とするため */ div.section div.section{ min-width:0; /* 上での指定を消しておく */ width:auto; margin:0 20%;/* 左右に余白を開ける */ } div.section div.news, div.section div.tableContent{ position:absolute; /* 絶対配置を指定します。 */ height:100%; /* 高さは親要素の高さを参照します。(親がrelativeなので */ width:19%; top:0;/* 親要素の一番上 */ } div.section div.news{ right:0;/* 親要素の右 */ } div.section div.tableContent{ left:0;/* 親要素の左 上と入れ替えれば逆になる */ } /* ここからナビゲーションの横並び */ div.nav{width:100%;height:40px;line-height:40px;} div.nav ol,div.nav ol li{display:block;liest-style:none;margin:0;padding:0;text-align:center;} div.nav ol li{display:inline-block;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./book">Books</a></li> ＿＿＿＿<li><a href="./profile">Profile</a></li> ＿＿＿＿<li><a href="./contact">Contact</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<div class="news"><!-- float時代の左--> ＿＿＿<h2>新着情報</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section"><!-- float時代の中央 --> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="tableContent"><!-- float時代の右 --> ＿＿＿<h3>新着情報</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#top">ページトップへ</a></li> ＿＿＿＿<li><a href="#section1">１章</a></li> ＿＿＿＿<li><a href="#section2">２章</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もっとも大事なことですが、 「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」は、「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」と、繰り返し強く否定されています。 両サイドのメニューの内容がわかりませんが、 <div class="section"> <h2>見出し</h2> <div class="section"> <h3>見出し</h2> <p>記事</p> <p>記事</p> </div> <div class="section"> <h3>見出し</h2> <p>記事</p> <p>記事</p> </div> <div class="section"> <h3>見出し</h2> <p>記事</p> <p>記事</p> </div> <div class="tableContent"> <ol> <li></li> </ol> </div> <div class="siteNews"> <h4>見出し</h4> </div> </div> のようにきちんと文書構造をマークアップして、スタイルシートでデザインしましょう。左に置こうが、右に置こうが・・後でデザインできます。 参考にされている参考書？がとても古いようです。tableでのデザインが否定されて12年以上たちます。
- szk9998
- ベストアンサー率45% (1026/2241)
ページの前後がどうなっているのかわかりません。 ですので一般論ですが、 TDタグの幅の指定は行っていますか？ <td style="width:100px"> ※数値は自分で試してみる。 のように幅を3列ともに指定してやれば、それ以上には広がりません。 （普通の場合は） ただし、いろいろな事情で上記だけでは幅を維持できない場合も多々発生します。 あとは、その場その場で個別に対処していくしかないですね。
