- 締切済み
CSSレイアウトでのdivコンテナをdreamweaverで作成する方
CSSレイアウトでのdivコンテナをdreamweaverで作成する方法。 （例）http://www.futon-index.jp/さんのページを引用します。このページはdiv containerを使用して作成されているようです。しかし教本には作成方法が記されていません。このように作るにはどの様な手順で作れば良いのでしょうか。よろしくお願いします。
- kazumito
- お礼率48% (18/37)
- ホームページ作成ソフト
- 回答数3
- ありがとう数14
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- dark_kappa
- ベストアンサー率67% (70/103)
No.1です。 DreamweaverCS5で作った、DIV分けスタイルの一番基本的な例を下記に記載します。 >参考にして頂いたURLページのように、ヘッド レフト メイン フッターと細かく線を加えて、各コンテナの作成はどうするのでしょうか。 下記サンプルでは、ヘッダー、メニュー、メイン、フッター、という４つの部品（DIV）を、コンテナという名前の大きな箱（DIV）でつつんでセンタリングしている、という非常に良くある例です。 スタイルである程度見た目を整えていますので、そのままメモ帳にコピーして拡張子をhtmlで保存し、ブラウザで見れば表示の様子は解りますし、そのままDreamweaverに入れてもどのように分けているのかが解るはずです。 Dreamweaverでは、先にデザインビューでテキストをガンガン入力してしまい、後からコードビューで部品分け（DIV分け）していくのが基本的なやり方です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無題ドキュメント</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #container { margin: 0px auto; width: 800px; } #header { background: #0FF; padding: 10px; margin-bottom: 20px; } #main { float: right; width: 600px; border: 1px solid #CCC; padding: 10px; margin-bottom: 20px; } #menu { background: #0FC; float: left; width: 156px; border: 1px solid #0FC; padding: 10px; margin-bottom: 20px; } #footer { background: #0FF; padding: 10px; clear: both; } </style> </head> <body> <div id="container"> <div id="header"> <p>■ここはヘッダー部分です■</p> <p>ページのタイトル</p> </div> <div id="main"> <p>■ここがメインコンテンツ部分です■</p> <p>記事はここに入ります。</p> <p>記事はここに入ります。</p> <p>記事はここに入ります。</p> <p>記事はここに入ります。</p> <p>記事はここに入ります。</p> </div> <div id="menu"> <p>■ここはメニュー部分です■</p> <ul> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </div> <div id="footer"> <p>■ここはフッター部分です■</p> <p>Copyrights © 2010 自分のサイト名. All rights reserved.</p> </div> </div> </body> </html>
コード デザイン 分割 ビューがあります。 HTMLは、普通にコードビューで書くことが出来ます。 <div></div>とキーボードで入力します。 class id の宣言は、<div id="aa"></div> とします。id="aa"をクリックすると、ＣＳＳの新規定義ができます。 そんな感じで使用するんです。
補足
ご回答いただきありがとうございます。さっそくdiv枠を作成してみました。しかしそのあと枠のサイズを指定したのみに止まっています。 参考にして頂いたURLページのように、ヘッド レフト メイン フッターと細かく線を加えて、各コンテナの作成はどうするのでしょうか。各枠の中にあるテーブル作成は分かるのですが。 またaaとは何ですか。 宜しかったらコンテナ枠を作成する新書籍があったらご紹介ください。これまで索引にコンテナさえ載っていない本ばかりしか見たことありません。
- dark_kappa
- ベストアンサー率67% (70/103)
まず始めに。 引用ページ例として貼られた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コンテナで作成すれば良いのかなと・・あと背景の作成法にも興味があります。 ご紹介いただいた書籍は県立図書館で調べてみます。
お礼
NO1様 いろいろ試行錯誤していてご返事遅くなりました。 ＞先にデザインビューでテキストをガンガン入力してしまい、 これは慣れればスピードアップに良いのでしょうね。分ける部分をdivで囲って部品分けしていく訳ですね。 ＞後からコードビューで部品分け（DIV分け）していくのが基本的なやり方です。 これは大いに助かるアドバイスです。ドンドン作れるようになりました。 ただ全体にそれぞれボックスを作って、中を部品分けしていくのではないのですか。たとえばレフトメニューコンテナとメインコンテナを別々につくっておくとか。 そうしないとメニューが本文部分より長くなると本文の下に来てしまいます。 ご教授お願いいたします。