CSSでのページ作成＜こまかなレイアウト＞

質問

CSSを勉強しながらページ作成をしています。
今まではテーブルをつかって組立てをしていました。

初歩的な質問かもしれないのですが、どのたかお教えください。
テーブルを使って細かいレイアウトを設定する際には、<table>を入れ子にして、spacer.gifで空白の部分を構成しますが、
CSSを使っての場合は、どのような方法がありますか？マージンなどを駆使するのでしょうか？
それとも、spacer.gifを使うのでしょうか？

それと、<table>の入れ子のように、<div>も入れ子にしていいのですか？あまり多用しない方がいいですよね？

本を見たのですが、そのような実践上の細かい説明が載っていなく、困っています。
慣れている方には初歩的な質問で大変申し訳ないのですが、やさしく教えて頂けると有難いたいです。

どうぞ宜しくお願い致します。

回答No.3

Nine-nine

私は、基本的には文章を構造化することからはじめます。
「1.見た目に惑わされないで
　2.構造的な意味でタグをつけること」
テーブルレイアウトをかじってしまった人は、考え方をリセットしなくては有効にｃｓｓを使うことができません。自分にとってわかりやすい方向に流れてしまうのです（テーブルレイアウトの考え方をむりやりｃｓｓにはめてしまう）。

見た目を触りたいからｃｓｓを使う人が多いと思うのですが、見た目から入ると、tableレイアウトの悪しき手法をｃｓｓに入れ込む事になり、返ってレイアウトが難しくなります。

http://okwave.jp/qa4014367.html
実例として質問時のｃｓｓが「tableレイアウトの悪しき手法をｃｓｓに直訳しようとした不完全ソース」です。そして後半は、ｃｓｓとｈｔｍｌがどんどん簡単になっていきます。ANo.8への御礼が今のところ最終案です。同じデザインを実現するためのソースです。実務としては、構造だけを表すタグのみで、デザインを全く考慮せず思い通りとなるとデザインに制約をうけます。特に4すみをリキッドで角丸にしようとすると、ほぼ、無理なことも多いです。がまず、構造に対してタグをつけること、それができないときは悔しがりながらふさわしいタグをつけることを練習されてはいかがでしょうか？そうすれば、ｃｓｓの利点が最大限に生かせます。

構造を考えてdivでまとめる。ご質問のレベルでは、divは入れ子にしない程度のデザインで、かなり細かい指定ができる筈です。何にでもdivを付けるのは関心しません。divにできることは、h1でもh2でもpでもliでもulでもtableでも、できます。そういう意味のないブロック要素に付けるのがdivです。

よく無駄に<div class=""><h2></h2></div>、<div class=""><ul></ul></div>、などというのを見かけます。divにデザインをつける為と推察できるのですが、<h2></h2>や<ul></ul>にデザインをするのと何ら変わらないのです。また、div内の<p>を指定することもできますので（そのdivの中のpだけはこういうデザインと指定）むやみやたらにdivをつけ、classやidを付けなくてもいいはずです。付けない方が管理が楽です。

構造さえ考えれば、デザインはどうでもなりますので、最初に構造をよく考えて、それから、ｃｓｓをはめます。
http://labs.unoh.net/2008/04/csshtml.html
同じ、構造（全く同じｈｔｍｌで配置換えの例）
http://blog.html.it/layoutgala/index.html
下の方に薄紫色のhtmlがあります。それを変えずに上の40ほどのレイアウトをｃｓｓだけでされてます。構造と見栄えは分離できるので、その考え方をまずは勉強されると「spacer.gif」なんて発想すら出てこなくなると思います。

ｃｓｓの位置調整は、right/left/top/bottom・margin/padding・position/float・各ブラウザ間の初期値調整・親子関係・隣接関係・マージン相殺等でしょうか。見栄えや見栄えにするためのタグは忘れ、思想をお勉強されると見栄えから入門するより、見栄えを操る近道になると思います。

質問とは直接の答えに見えないと思います。やさしく教えると、「そのような実践上の細かい説明が載っていなく」ではなく、載っているのだけど、テーブルレイアウト頭には受け取れないのだと思います。数値を入れる、右・左にどんな解説が必要ですか？

見た目デザイン無視、構造重視でhtmlを書き、それに見た目デザインを付けることを理解されることをお奨めします。その理解なくしてｃｓｓの勉強は必ず早晩行き詰まります。

お礼

Nine-nineさん。

こんなにも細かく回答して頂き、感謝しています。ありがとうございます。
リンクつけてもらったサイトを覘きながらNine-nineさんの説明を何度も読まさせてもいらいました。
まずは、私の頭をリセットしなくては先へ進めないですね。<table>を<div>に置き換えようとしてる時点でcssを使う価値が無いという事が分かりました。この事だけでも質問箱に相談して良かったと思います。

もういちど、HTMLの基礎、タグの役割を勉強しなおして、簡潔な構造を作る。その上でcssでレイアウト。ですね！
http://okwave.jp/qa4014367.html​
のcssとhtmlがどんどん簡単になってゆく様は圧巻です。きちんとした知識を身につける大切さを
知らされました。
リンクつけて頂いたサイト、もっと熟読させてもらいます。

本当にありがとうございました。

回答No.2

tsucu

＃１です。
すいません。ちゃんと読んでなかったですね。

＞それと、<table>の入れ子のように、<div>も入れ子にしていいのですか？
＞あまり多用しない方がいいですよね？

必要ならば、<div>を入れ子にするのはまったく問題ありません。
当然、デザインのみの不必要な入れ子はあまり好ましくはありませんが、HTMLの論理タグ自体が不足してますし、私は仕方ないと考えています。

お礼

tsucuさん。
回答ありがとうございました。
<table>で出来たことが<div>ではできないのか？という観点に偏っていることが、そもそも私のいけない所だったようです。
きちんと各タグの役割を再認識し、適所で使うことを勉強する必要がありました。
どうしていいものか分からず、手が止まってしまっていたのですが、tsucuさんの優しいコメントに少し励まされました。沢山いじりながら習得していくしかないみたいですね。頑張ります。

本当にありがとうございました。

回答No.1

tsucu

＞CSSを使っての場合は、どのような方法がありますか？
＞マージンなどを駆使するのでしょうか？
＞それとも、spacer.gifを使うのでしょうか？

CSSでspacerは使いません。通常はmarginやpaddingを使います。もちろん絶対座標や相対座標を使うことも出来ます。

＞それと、<table>の入れ子のように、<div>も入れ子にしていいのですか？
＞あまり多用しない方がいいですよね？

多用はしないほうがいいですが、最初のうちはハイブリッド（テーブル組みとCSSの両方）でレイアウトしていくのもありだと思いますよ。

具体的な例（ソースの一部）を挙げて質問されたほうが、答える方も具体的な回答が出せると思いますよ。