DreamweaverのレイヤーとDiv

Question

Cssを覚えようと勉強中で、
よくある本の付属CD-ROMにある企業のWEBサンプルをDreamweaverで開いてみてみたら、
構成するにあたって、色々と疑問がでてきました・・。

Dreamweaverで開くと、レイヤー表示される所と、
(プロパティにレイヤーとでて、ドラッグなどで位置修正可能)
赤い枠だけ表示される、DIVのコンテンツブロックのものとありました。
(プロパティには、ID名が表示されるのみで、レイヤーとは表示されず、位置調整がドラッグではできない)

レイヤーの方はわかるんですが、
赤枠だけ表示されるDIVのコンテンツブロックってどうやって作るのですか？ 
どうしても位置を指定すると、レイヤー化しますよね・・。
でも、色々な企業サイトのサンプルをDreamweaverで開いてみても、
どのサイトもレイヤーとコンテンツブロックとわかれていました。
なぜ、赤い枠のものと、レイヤーとわかれて作るのですか？
どういう関係で分けているんでしょう？
headerをレイヤーで作っている所もありましたし、
footerを赤枠のみのdivコンテンツブロックで作っている所もありました。謎です。。

どなたか分かる方、教えてください・・；
・赤い枠のみのIDコンテンツブロックの作り方(レイヤーにならない
・なぜレイヤーと↑と分けて作るのか不明、何を元に分けているのか、分からない
・cssの設定ってかなり量がありますが、どうやって整理して作成しているのか。
一つ一つ、これとこれが同じでってやっていったら、きりがないですよね。。
横のウィンドウのタグから、
適用ルールにインラインスタイルってでるんですが、
そこで一つ一つ新規ルール作成で作っているんでしょうか？

色々質問すみませんが、回答いただけると助かります。
宜しくお願いします！

jizocko · Accepted Answer

こんにちわ。Dreamweaver CS3　だとか秀丸とかを使っています。＞赤枠だけ表示されるDIVのコンテンツブロックってどうやって作るのですか？以下に簡単にサンプルを書きますね。ＩＤはheaderとでもしましょうか。１．の書き方　　header {padding:0; margin:0; } 上のようにＩＤであるheaderをそのまま書くとhtmlでは下のようになります。　　

サンプル１

２．の書き方は、headerの前に#をつけます。　　#header {padding:0; margin:0; }　上のように書くとhtmlは下のようになります。　　　３．今度はheaderの前に.をつけます。　　.header {padding:0; margin:0; }　上のように書くとhtmlは下のようになります。　　ＩＤは、自分で好きに定義してデザインできます。 class属性はid要素の子になります。 http://www.tohoho-web.com/css/index.htm http://www.htmq.com/

jizocko · Answer

ANo.1です。追記です。

以下はAdobeのヘルプリソースセンターです。
http://livedocs.adobe.com/ja_JP/Dreamweaver/9.0/help.html?content=WScbb6b82af5544594822510a94ae8d65-7e15.html

ノンピリオドさんのところでも簡単なリファレンスがあります。
http://www.non-period.com/be/dw/cs3/index.html

jizocko · Answer

ANo.1です。＞・cssの設定ってかなり量がありますが、どうやって整理して作成しているのか。＞一つ一つ、これとこれが同じでってやっていったら、きりがないですよね。。＞横のウィンドウのタグから、＞適用ルールにインラインスタイルってでるんですが、＞そこで一つ一つ新規ルール作成で作っているんでしょうか？テキストでテコテコ手入力をしているのですが、まだＣＳＳの作り方になれていない場合は、 Dreamweaver CS3　の以下の使い方で先に大雑把なデザインだけを決めてしまい、変更していくという方法もあります。１．新規作成を選択２．「テンプレートからの作成で」項目で「CSSスタイルシート」を選択３．一番左側ペインで「空白ページ」を選択４．同じ画面の「ページタイプ」項目から「ＨＴＭＬ」を作成５．同画面「レイアウト」項目より自分のイメージしているレイアウトスタイルを選択（選択すると、同画面の一番右側にビューが表示されます）６．決まったら、「作成」ボタンを押す７．ＨＴＭＬページが作成されるので、そのページの～部分に書かれたスタイルシート部分をＣＳＳの別ファイルに移す。なお、空のＣＳＳファイルの作り方がわからないときには、以下のように操作すると空ファイルを作成できます。１．新規作成を選択２．「テンプレートからの作成で」項目で「CSSスタイルシート」を選択３．「空白ページ」を選択４．「ページタイプ」項目より「ＣＳＳ」を選択５．「作成」ボタンを押す上の操作を行うと　@charset と CSS Document の宣言文だけのＣＳＳ空ファイルが作成されますので、そこへコピーした項目などを移し、後はカスタマイズをしていきます。作成したＣＳＳを元のＨＴＭＬページに読み込ませ、ブラウザで表示しながら、自分のイメージに合うようにカスタマイズしていきます。この時に画面の「分割」をすると上下に別れ、上がソース画面、下がビューになります。ただし、Dreamweaverのビューと言うのは、「保存」をしていないので、簡易的にメモリ上に置いてあるものをビューするだけですから、設定どおりにビューされない事が多々あります。面倒でもブラウザでビューすることをお薦めします。ブラウザもエンジンの違うブラウザでの表示確認をされることをお薦めします。エンジンが違うブラウザですと、解釈の仕方がちがいますので、みんな表示のされ方が違う、という事があります。 Firefox は、ブラウザの標準仕様であるW3Cにのっとった解釈をしますので、これが基本になるかと思われます。ＩＥはMicrosoft独自のIEエンジンを使用しています。その他、Opera、Safariなどがあります。SeamonkeyはFirefoxと同じエンジンを積んでいますので、これは表示テストをしなくてもいいのではないかと思います。 Opera、Safariはカラーがきれいなので、おそらくこれは特別な仕様を使っているかな？と思っていますが、後はW3Cにのっとっているようです。ブラウザの世界の標準仕様ということは、全世界で共通ということです。 Microsoft独自という事は、Microsoftの製品であれば、という認識になると思います。リストマーク、テーブルタグ、ボーダ属性、カラー、その他もろもろで、若干の違いなどがあるようです。以上です。

caz04 · Answer

確認はしていませんが、普段使っている記憶で回答します。

＞・赤い枠のみのIDコンテンツブロックの作り方(レイヤーにならない
＞・なぜレイヤーと↑と分けて作るのか不明、何を元に分けているのか、分からない

positionプロパティを使ったときにレイヤー扱いになると思います。
通常、BOXの位置指定はmargin、paddingを使い指定しますが、positionプロパティでpx単位で任意の位置に指定できます。この時にレイヤー扱いになると思います。
CSSの位置指定は基本はmargin、paddingで配置し、状況によりpositionを使いレイアウトすることが多いと思います。
この辺の判断は経験で学んでいくところでしょうか。
その時々の状況に応じて使い分けることになり、一概にどちらとは言えません。


＞・cssの設定ってかなり量がありますが、どうやって整理して作成しているのか。
一つ一つ、これとこれが同じでってやっていったら、きりがないですよね。。
横のウィンドウのタグから、
適用ルールにインラインスタイルってでるんですが、
そこで一つ一つ新規ルール作成で作っているんでしょうか？

すみません。質問の意味がいまいちよくわかりません。

DreamweaverのレイヤーとDiv

こんにちわ。

ANo.1です。

ANo.1です。

確認はしていませんが、普段使っている記憶で回答します。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング