ドリームウィーバーでCSSでレイアウト

質問

DREAMWEAVER MXを使ってマックでサイトの作成をしています。始めて1年ほどですがようやく思うような感じのサイトが作れるようになったかと。（プロのような高度な事はできませんが）素人程度ではそれなりかと・・・　
CSSの存在は知っていましたし、時代はCSSが主流なのも知っていましたが、独学で初めてのサイト作りだったので、「基本から」と思い今はHTMLのみで作っています。
で、ある程度HTMLの理屈がわかったのでCSSの勉強を始めようと思っています。
ずばり、どのように始めたらいいでしょうか？　それと　今、作っているHTMLのサイトをCSSでコントロールする事はできるのでしょうか？　←例えば今のフォントの指定やテーブルの指定は残したままで表示のコントロールをCSSに切り替える事は可能でしょうか？

見当違いの質問かもしれませんがよろしくお願いいたします。

回答No.1

s_hukami · ベストアンサー

HTMLとCSSは併用可能です。
というよりも、CSSはHTMLの見映えを良くしたり、ソースコードを簡略化させるために考案・提唱されたものです。
しかし、表示のコントロールをCSSに切り替えるというのは、サイトのレイアウトをCSSに切り替えたいということでしょうか。
その場合は大幅にHTMLを書き換える必要があると思います。
慣れない内は、TABLEでレイアウトしているようであれば、よほど複雑な入れ子などになっていない限りはそのままTABLEを残して流用した方が楽かもしれません。
CSSだけで複数のブラウザで同じように見えるレイアウトを作成するのは試行錯誤や確認などが必要なので。
ただ、外枠などを表示したり、背景画像などを表示するために複雑なTABLEを使用している場合は、CSSに切り替えた方が、ソースコードがすっきりしますし、ファイルサイズも軽減できます。
CSSに慣れてきたら、全てCSSでレイアウトしてみると良いのではないかと思います。
ただしその場合、HTMLを大幅に改変することになると思います。

フォントの指定はfontタグで指定するよりも、CSSで記述した方がソースコードもファイルサイズも軽減できると思います。
慣れない内は例えば「.red{ color: #FF0000; }」などとCSSに記述しておいて、テキストを赤い字で表示したい場合には<span class="red">ここは赤い字</span>などのように記述すると楽かもしれません。
CSSのクラス名やID名は、自分の好きなものを指定できるので、自分がわかりやすいように記述しましょう。

全てCSSに切り替える場合は、HTMLの最初の書き換えは面倒ですが、CSSを外部リンクにしてしまえば、次回からはサイトデザインの全改装などの作業が楽になり、全体のファイルサイズを軽減することも可能です。

Dreamweaver MXをご利用なら、テンプレート機能を利用すれば、CSSを適用したサイトデザインに変更する作業も楽になると思います。
その場合は、新しく作るデザインのサイトを、サイト管理で新規作成して、旧サイトとは別のフォルダにファイルを保存して、新しくテンプレートとCSSを作成して作業すると良いのではないかと思います。
旧サイトのHTMLを開きながら、必要な箇所をコピー&ペーストしながら作業すると、作業が軽減できると思います。
テンプレート機能については、Dreamweaverヘルプの「Dreamweaver MXの使い方 > ページのレイアウト > テンプレートの管理」以下に記述されています。
普通にベースになるHTMLファイルを作成してから、「ファイル > テンプレートとして保存」でテンプレートとして保存し、「ファイル > 新規作成 > テンプレート」で使用するテンプレートを選択して、「作成」を選択すると、テンプレートを適用したHTMLファイルが作成できます。
テンプレートを作成する際に、「挿入 > テンプレートオブジェクト」という項目から「編集可能領域」を挿入すると、HTMLファイルで作業する際には、「編集可能領域」として指定した箇所のみ編集可能です。
「編集可能領域」以外を編集したい場合はテンプレートファイルをDreamweaverで編集すると、そのテンプレートを適用しているファイル全てが変更されます。

お礼

ご丁寧な回答に感謝します。参考にします。やはり一筋縄では行かないようですね、HTMLで勉強していてもそうですが全体像がわかってきてやっと細部の意味が分かるとか、いろいろと試行錯誤が必要のようですね。（独学なので仕方ないとは思いますが）一度今の状態で色々とCSSでいじって試してみます。このままHTML止まりになってしまうともったいないですから

回答No.2

suzuko

同じように先日、自分のサイトにCSSを導入しました。
「Ｗｅｂ標準の教科書　ＸＨＴＭＬとＣＳＳでつくる“正しい”Ｗｅｂサイト 」
「世界の「最先端」事例に学ぶＣＳＳプロフェッショナル・スタイル 」がとっても参考になりましたよ。

初めは途方に暮れたのですが、少しづつ理解できていくとなかなか楽しい作業でした。^^

お礼

ご回答ありがとうございました。同じ体験をされた方からの回答なので説得力があります。紹介してくださった本を早速探しに行こうと思います。
>>初めは途方に暮れたのですが・・・
↑思いやられます