2カラムのレイアウトをしたい。

0   名前： みんみ ： 2005/09/23 16:28
ありがちなレイアウトですが、ヘッダーの下を２カラムのレイアウトにして
左をメニューバー、右をコンテンツ表示のレイアウトにしたいと思っています。

続きのように指定してみたのですが、WinIE6だと表示できるのですが、
FireFoxだと“containts ”の部分が右に回り込んでくれません。
どこが間違っているのか、ご教示いただけないでしょうか。

あとできれば“side menu”は“containts ”の長さに合わせたいのです。
そこも間違っているみたいなので、教えて頂けると助かります。
よろしくお願いいたします。
1   名前： みんみ ： 2005/09/23 16:28
ソース 1)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>hogehoge</title>
<style type="text/css">
<!--
body {margin-top:0;text-align:center; background: url(img/bg.gif) repeat;}

table{width:678px; border:0;margin:auto;border-collapse:collapse;}

/* shadow at right and left */
td#c{ width:640px;margin:0;padding:0; background-color: #fff;}

/* main */
.main{width:640px;}

/* header */
#header{width:640px; height:70px; background: #1D358B url(img/header.jpg) no-repeat bottom; margin-bottom:5px;}
#header span{display:none;}

/* side menu */
.menu{float:left;}
.menu div {width:160px; background: url(img/bg_menu.gif) repeat;}
.menu h1 {width:160px; background-color:#48047B; font-family:'sans-serif','ＭＳ Ｐゴシック'; font-size:14px; font-weight:bold; color:#fff; padding:5px 5px 5px 8px;margin:0;}
.menu div.jp{width:160px; color:#1D354C; font-family:'sans-serif','MS UI Gothic'; font-size:12px; line-height:135%; text-align: justify; text-justify: distribute; padding:8px 6px 35px 8px;}
.menu a{display:block; width:160px; background-color:#AAAACC; font-family:'sans-serif','ＭＳ Ｐゴシック'; font-size:14px; font-weight:bold; color:#1D354C; padding:5px 5px 5px 8px;}

/* containts */
.cont {width:460px;float:left;margin-left:10px;}
.cont div {width:460px;}
.cont h1 {width:460px; background-color:#A5AED1; padding:8px;margin:0;
font-family:'sans-serif','ＭＳ Ｐゴシック'; font-size:15px; font-weight:bold; color:#1D358B;}
.cont div.text {color:#505050; font-family:'sans-serif','ＭＳ Ｐゴシック'; font-size:12px; line-height:135%; text-align: justify; text-justify: distribute; padding:15px 20px 35px 10px;}
-->
</style>
</head>
2   名前： みんみ ： 2005/09/23 16:28
ソース 2)

<body>
<table>
<tr>
<td id="c">
<div id="main">
<div id="header">
<span>header</span>
</div>
<!-- side menu ここから -->
<div class="menu">
<h1>メニューhogehoge1</h1>
<div class="jp">hogehogehogehogeについての説明です。</div>
<a href="hogehoge.html">メニューhogehoge2</a>
<div class="jp">hogehogehogehogeについての説明です。</div>
<a href="hogehoge.html">メニューhogehoge3</a>
<div class="jp">hogehogehogehogeについての説明です。</div>
</div>
<!-- side menu ここまで -->
<!-- containts ここから -->
<div class="cont">
<h1>hogehogeについて</h1>
<div class="text">hogehogehogehogehogehogehogehogehogehogehogehogeについての説明です。</div><img
src="img/hogehoge.gif" width="355" height="167" alt="">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
3   名前： Bill閣下 ： 2005/09/23 16:28
おおよそ、widthの計算に
padding,borderを含めているかどうかの違いとかその辺だと思います。
DOCTYPEスイッチとかレンダリングモードとか、なんか色々ややこしいです。

width:autoで済むところにはwidthを明示しないで、
具体的なwidthを指定している部分には
同時にpaddingとborderを指定しないでください。
.menu div, .menu h1, cont div, cont h1のwidth指定はたぶん不要です。

2つのボックスの高さをCSSで合わせるのは正攻法では不可能です。

ソースを見たところ、HTMLの理解がまだ浅いように見受けられました。
段組レイアウトの実現は無理せずにテーブルレイアウトで
やることをお勧めします。
4   名前： みんみ ： 2005/09/23 16:28
Bill閣下さま

レスありがとうございます。
色々やってみたのですが、
確実ですし、時間もかからないので
レイアウトはお勧めの通り
テーブルでやることにしました。

ありがとうございます。
5   名前： Bill閣下 ： 2005/09/23 16:28
今朝書いたことが誤解を招きそうなので補足というか。

私はテーブルレイアウトを一般的に勧めているわけではない、
ということに注意してください。
でも段組デザインの実現にCSSを使って腐心するぐらいだったら
テーブルレイアウトでもして、
浮いた時間でコンテンツを作って公開する方が
いいんじゃないかな、と思います。

余裕がある人は以下の文書を参考にすればよいと思います。

ADP: floatレイアウトでつまづかないためのTips
http://adp.daa.jp/archives/000250.html
6   名前： Pid ： 2005/09/23 16:28
私は最初 http://www.motchie.com/article/multicolumn.html を意味も分からぬまま真似していました。


はっきり申し上げて，>>2 のソースはテーブルレイアウトと何ら変わりないので，>>3, >>5 で Bill 閣下さんが仰ったことはもっともなことだと思います。

ただ，一旦テーブルレイアウトに染まってしまうと，その他の手段への頭の切り替えができなくなってしまうので，もし近くに良いアドバイザが居るなら，なるべく早めに正しい HTML を習得して，CSS レイアウト脳になってしまった方が良いかもしれません。


※ Web ページを，閲覧するだけのものではなく，利用者が能動的に情報を取得していく媒体として考えると，レイアウトのためだけの table 要素は非常に邪魔になるんです…と自分の都合を述べてみる (^^;)。
7   名前： みんみ ： 2005/09/23 16:28
Bill閣下さん
何度もありがとうございます。
ご丁寧にすみません。

このコンテンツは全部で２０ページあるのですがCSSでレイアウトすると
印刷用のページも作らなければならなくなり、倍以上の労力が必要になります。
ということにふと気づいて、今回そんなに時間をかけられないので、テーブルにしようと決めていました。
朝レスを見る前に、投稿を削除しようと思っていたのですが、レス付けていただいて居たので
残ってしまいました。
すみません。

＞Pidさん
レスありがとうございます。
大元をテーブルにしたのには理由があるのですが>>2には今回の質問とは関係ないので省略しました。
関係あるトコだけ書けばよかったですね。

結果的にcssの理解がまだなので、しばらくは勉強しつつ表示が保障されることを第一に
やっていこうと思います。
※一応、チェッカーで満点出るくらいのソースなので美しいは思いませんが、中の下くらいのレベルだと思います。

テーブルのレイアウトだと、具体的に言うとどんなことが困るのでしょうか？
私は特に困ったことがないので、もしよければ教えてください。
8   名前： みんみ ： 2005/09/23 16:28
Bill閣下さん
いい機会なのでもし良かったらですが、もう少しお付き合いください。

>>3
>.menu div, .menu h1, cont div, cont h1のwidth指定はたぶん不要です。

.menu div, .menu h1はwidthを外したら、FireFoxではそれぞれのサイズが変わってしまいました。
どのように指定したら良いでしょうか？
9   名前： Bill閣下 ： 2005/09/23 16:28
失礼。それは私のミスです。
.menuの方で幅を指定するとよいと思います。
そうすることで.menu div.jpと.menu aのwidth指定も不要になります。

私はテーブルレイアウトで困ることが時々あります。
私が使っているブラウザでは、ページ作成者のCSSを無効にすることが
簡単に行えるのですが、それによって段組が解除されることを期待しても
(3段組ぐらいになると、そのままでは読みにくいページが結構出てきます)
段組が解除されないのです。
それは当たり前で、表は崩れたら意味が変わってしまうから、
崩せないのです。
10   名前： Pid ： 2005/09/23 16:28
>>7
> 大元をテーブルにしたのには理由があるのですが

私が意図していたのはそこではなく，ぶっちゃけ <table>，<tr>，<td> を <div> に置き換えただけのような気がしたもので。

div 要素はそれ自体では意味を持ちませんから，div タグを剥ぎ取ったときでも，完全なマークアップであることが望ましいと私は思います（これはテーブルレイアウトの場合も同じです）。適切なマークアップ情報が無いと，たとえばあるページのある部分だけを抜き出してスクラップブック化するとか，見出しだけを抽出して機械的にページ要約を作ってみるとか，そういう応用がきかなくなってしまいます。

また，>>9 で Bill 閣下さんが仰るように，テーブルレイアウトだと段組を解除したくてもできないので，京ぽんユーザとしては痛いですね（ええ，以上すべてこちらの勝手な都合なのですが (^^;)）。


>>2 だけで言えば，

<body>
<h1>hogehoge について</h1>

<p>hogehogehogehogehogehogehogehogehogehogehogehoge についての説明です。</p>

<p><img alt="" src="img/hogehoge.gif" width="355" height="167" ></p>

<hr title="">

<dl class="menu">
<dt class="now-here">メニュー hogehoge1</dt>
<dd>hogehogehogehoge についての説明です。</dd>
<dt>メニュー hogehoge2</dt>
<dd>hogehogehogehoge についての説明です。</dd>
<dt>メニュー hogehoge2</dt>
<dd>hogehogehogehoge についての説明です。</dd>
</dl>
</body>

でほぼ同じレイアウトが実現できますので，もし時間がおありならお試し下さい（まあ，ブラウザのバグ対策を考えると，div をもう少し増やさざるを得ないでしょうが）。


※すみません，ご質問の本筋とは関係のない余談でした m(_ _)m。
11   名前： Bill閣下 ： 2005/09/23 16:28
なんか、1と2のソースをコピーして保存してFirefox 1.0.6で開いてみたら
ちゃんと段組になっていましたよ。
でも、微妙に揃ってない感じだったので書き直してみたり。
http://www5e.biglobe.ne.jp/~bill/20050924.html
(まだ23日なのに20050924なのは気にしないでください。)

手抜きだしマーク付けに癖があるかもしれないので、
これを使え！というのではなく、参考にでもしてください。
もちろん使ってもいいですけど。
一覧へ戻る