- ベストアンサー
DreamweaverのレイヤーとDiv
- Dreamweaverで開くと、レイヤー表示とDIVのコンテンツブロックがありますが、それぞれの作り方や関係性がわかりません。
- 赤い枠だけ表示されるDIVのコンテンツブロックの作り方や、なぜレイヤーと分けて作るのか不明です。
- CSSの設定の整理方法や、適用ルールの作成方法も分かりません。どなたか教えていただけませんか？
- firebrick
- お礼率80% (118/147)
- ホームページ作成ソフト
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちわ。Dreamweaver CS3 だとか秀丸とかを使っています。 ＞赤枠だけ表示されるDIVのコンテンツブロックってどうやって作るのですか？ 以下に簡単にサンプルを書きますね。ＩＤはheaderとでもしましょうか。 １．の書き方 header {padding:0; margin:0; } 上のようにＩＤであるheaderをそのまま書くとhtmlでは下のようになります。 <header>サンプル１</header> ２．の書き方は、headerの前に#をつけます。 #header {padding:0; margin:0; } 上のように書くとhtmlは下のようになります。 <div id="header">サンプル２</div> ３．今度はheaderの前に.をつけます。 .header {padding:0; margin:0; } 上のように書くとhtmlは下のようになります。 <div class="header">サンプル３</div> ＩＤは、自分で好きに定義してデザインできます。 class属性はid要素の子になります。 http://www.tohoho-web.com/css/index.htm http://www.htmq.com/
その他の回答 (3)
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
お礼
ご丁寧に再度回答ありがとうございます。 リファレンスをよく見ようと思います、どうもありがとうございました！
ANo.1です。 ＞・cssの設定ってかなり量がありますが、どうやって整理して作成しているのか。 ＞一つ一つ、これとこれが同じでってやっていったら、きりがないですよね。。 ＞横のウィンドウのタグから、 ＞適用ルールにインラインスタイルってでるんですが、 ＞そこで一つ一つ新規ルール作成で作っているんでしょうか？ テキストでテコテコ手入力をしているのですが、まだＣＳＳの作り方になれていない場合は、 Dreamweaver CS3 の以下の使い方で先に大雑把なデザインだけを決めてしまい、変更していくという方法もあります。 １．新規作成を選択 ２．「テンプレートからの作成で」項目で「CSSスタイルシート」を選択 ３．一番左側ペインで「空白ページ」を選択 ４．同じ画面の「ページタイプ」項目から「ＨＴＭＬ」を作成 ５．同画面「レイアウト」項目より自分のイメージしているレイアウトスタイルを選択 （選択すると、同画面の一番右側にビューが表示されます） ６．決まったら、「作成」ボタンを押す ７．ＨＴＭＬページが作成されるので、そのページの<head>～</head>部分に書かれたスタイルシート部分をＣＳＳの別ファイルに移す。 なお、空のＣＳＳファイルの作り方がわからないときには、以下のように操作すると空ファイルを作成できます。 １．新規作成を選択 ２．「テンプレートからの作成で」項目で「CSSスタイルシート」を選択 ３．「空白ページ」を選択 ４．「ページタイプ」項目より「ＣＳＳ」を選択 ５．「作成」ボタンを押す 上の操作を行うと @charset と CSS Document の宣言文だけのＣＳＳ空ファイルが作成されますので、 そこへコピーした項目などを移し、後はカスタマイズをしていきます。 作成したＣＳＳを元のＨＴＭＬページに読み込ませ、 ブラウザで表示しながら、自分のイメージに合うようにカスタマイズしていきます。 この時に画面の「分割」をすると上下に別れ、上がソース画面、下がビューになります。 ただし、Dreamweaverのビューと言うのは、「保存」をしていないので、 簡易的にメモリ上に置いてあるものをビューするだけですから、 設定どおりにビューされない事が多々あります。 面倒でもブラウザでビューすることをお薦めします。 ブラウザもエンジンの違うブラウザでの表示確認をされることをお薦めします。 エンジンが違うブラウザですと、解釈の仕方がちがいますので、 みんな表示のされ方が違う、という事があります。 Firefox は、ブラウザの標準仕様であるW3Cにのっとった解釈をしますので、 これが基本になるかと思われます。 ＩＥはMicrosoft独自のIEエンジンを使用しています。 その他、Opera、Safariなどがあります。SeamonkeyはFirefoxと同じエンジンを積んでいますので、 これは表示テストをしなくてもいいのではないかと思います。 Opera、Safariはカラーがきれいなので、おそらくこれは特別な仕様を使っているかな？と 思っていますが、後はW3Cにのっとっているようです。 ブラウザの世界の標準仕様ということは、全世界で共通ということです。 Microsoft独自という事は、Microsoftの製品であれば、という認識になると思います。 リストマーク、テーブルタグ、ボーダ属性、カラー、その他もろもろで、 若干の違いなどがあるようです。 以上です。
お礼
ご説明いただき、ありがとうございます。 すでにあるCSSをカスタマイズするのも手、ですね、なるほど～。 空のは使ったことなかったです、アドバイスありがとうございます。 Dreamweaverのビューは確かに正常に表示されている訳ではない。。 そういわれてみると、思い当たるふしがあります； そして、サーバーにあげても、上げて暫くの間、ちゃんと見れていたのに、 何時間かしてから？マークがでたりと(画像の所がmacでみるとそうなります) そこの画像はおかしくなる前は特にいじっていませんし、、 リンクもソースを確かめましたが、正常でした。 再度その画像を消して画像リンクをつけなおすと直りましたが。。 何回かあるので、Dreamweaverがおかしいのか、サーバーがおかしいのかわからい時がありますね、 ブラウザの世界の標準というのは、全世界、言われてみれば・・と思いました。 CSSについての詳しい話、とても興味深かったです、ありがとうございました。
- caz04
- ベストアンサー率45% (9/20)
確認はしていませんが、普段使っている記憶で回答します。 ＞・赤い枠のみのIDコンテンツブロックの作り方(レイヤーにならない ＞・なぜレイヤーと↑と分けて作るのか不明、何を元に分けているのか、分からない positionプロパティを使ったときにレイヤー扱いになると思います。 通常、BOXの位置指定はmargin、paddingを使い指定しますが、positionプロパティでpx単位で任意の位置に指定できます。この時にレイヤー扱いになると思います。 CSSの位置指定は基本はmargin、paddingで配置し、状況によりpositionを使いレイアウトすることが多いと思います。 この辺の判断は経験で学んでいくところでしょうか。 その時々の状況に応じて使い分けることになり、一概にどちらとは言えません。 ＞・cssの設定ってかなり量がありますが、どうやって整理して作成しているのか。 一つ一つ、これとこれが同じでってやっていったら、きりがないですよね。。 横のウィンドウのタグから、 適用ルールにインラインスタイルってでるんですが、 そこで一つ一つ新規ルール作成で作っているんでしょうか？ すみません。質問の意味がいまいちよくわかりません。
お礼
意味がわかりづらくてすみません。。 CSSって一つ一つ、CSSのタグから新規作成して、 クラス設定して、幅を記述してしているのかなーと・・。 それだと、設定する時にポップアップウィンドウがでる→ 幅やマージン記述・・選択して、ＯＫ、と一つ一つやってるとすごい時間かかりますよね・・。 皆さん一つ一つそうやっているんでしょうか？という意味なんです。 わかりますでしょうか？もし、まだわかりづらかったらすみません； 説明しづらい所ですね(汗 位置指定すると、レイヤーになるんですね、 絶対固定のもの、位置移動など、調節したいものとして、 状況に応じて使っていきたいと思います。 ありがとうございました。
お礼
赤いのだけ作れました！ありがとうございます。