CSSレイアウトでのdivコンテナをdreamweaverで作成する方

質問

CSSレイアウトでのdivコンテナをdreamweaverで作成する方法。　（例）http://www.futon-index.jp/さんのページを引用します。このページはdiv　containerを使用して作成されているようです。しかし教本には作成方法が記されていません。このように作るにはどの様な手順で作れば良いのでしょうか。よろしくお願いします。

回答No.1

dark_kappa

まず始めに。
引用ページ例として貼られたURL先のページは、完全にDIVの段組みスタイルで作っている訳ではなく、レイアウトにtableタグを使っていたり、h2タグの後にh1タグを入れていたりと、SEO対策的にはどうよ？という構造であることを知っておいてください。

【引用ページのスタイルの概念】

<div id="container">
<div id="center">

（略）

</div>
</div>

#containerでは、このdivの幅を指定せずに、
マージンの上と下をゼロ（ピクセル）、マージンの右と左をautoで指定しています。
基本的に幅指定しないでのセンタリングは意味がないので、この指定の意味は謎です。

#centerのスタイルを発見できなかったのですが、恐らくはここでdivの幅を固定したうえで、マージンの上と下をゼロ（ピクセル）、マージンの右と左をautoで指定しているのでしょう。

これでセンタリングが出来るので、この中にレイアウトをしていきます。

最初にコンテンツを作ってしまい、後からそれに対してDIVで分けていって、そのDIVの配置をどうするかをCSSで書いていくのがdivでの段組みの基本です。

構造的に優れていて、かつ見栄えのするカンタンで基本的なDIVでの段組みスタイルの例として、下記の本を参考にされるのがいいのでは？と思います。

インプレスジャパン　発行
【できるクリエイター　Dreamweaver　独習ナビ】
CS3/8対応
ISBN978-4-8443-2406-5
2,800円

CS3用に書かれていますが、そのままCS4/5にも対応します。
画像のデータも付いているうえに、ひとつのサイトを構築していく様子を順を追って合理的かつ解りやすく解説している初心者向けの本です。
この本の通りに、本の中で解説している家具屋さんのWebページを作ると、Dreamweaverでのdiv段組みの基本を学ぶ事ができます。

更にもっと多彩なDIVレイアウトを学びたいのであれば

ＭｄＮコーポレーション　発行
【スタイルシート　表現デザイン帖】
ISBN978-4-8443-6017-9
1,800円

ＭｄＮコーポレーション　発行
黒須　信宏　著
【Webデザイン　明解テクニック　１００】
ISBN978-4-8443-5969-2
2,300円

…などが役立つのでは？と思います。

>このように作るにはどの様な手順で作れば良いのでしょうか

正直、300ページ近い本１冊分くらいの分量の解説になるわけですから、概念的な事しか書けません。

どのようなスタイルでできるのかというサンプルを添付しても理解できないかもしれないので、上記の本などを参考に独学されるとよろしいかと思います。

実際に、私は上記の本３冊全て持っており、全て読んでDreamweaverでのDIVを使った段組みスタイルの様々な形態のものをサクサク作れるようになっています。

お礼

早速回答いただきありがとうございます。例として貼ったページはページ作成会社が商用ページをサブワークとして作成した様です。このページで疑問に思ったのは、２カムでメインとレフトが連動して伸縮するのはどうしてかと思いました。それでDivコンテナで作成すれば良いのかなと・・あと背景の作成法にも興味があります。

ご紹介いただいた書籍は県立図書館で調べてみます。