【Dreamweaver】CSSデザイナーを使って効率的にコーディングしよう!初級編




Webサイト制作において、今ではDreamweaverを活用する人は増えているでしょう。

HTMLとCSSはもっとも重要になってきます。

Dreamweaverには、CSSを効率的に使えるように「CSSデザイナー機能」が用意されています。

今日はその扱い方を記述したいと思います。

CSSデザイナーって何?

極論、Webサイト制作は、WindowsやMacintoshに標準で付属しているテキストエディタがあれば作れます。

ですが、多くの方がDreamweaverを使っているのは理由があります。

Dreamweaverは自動生成したコードを確認し、CSSのプロパティや値を徐々に覚えていくこともできます。

そのため、DreamweaverがあればCSSをあまり知らなくても自由にスタイルを設定できます。

初心者の方が制作するのに向いているということですね。

プロパティや値を詳しく知っているにこしたことはありません。

Dreamweaverを使用すると、CSSを直接手打ちで記述していくときもコードヒント機能によりスムーズなルール定義が可能となっています。

CSSデザイナーの使い方

  • Dreamweaver右上にある「CSSデザイナー」をクリック
  • 「新規CSSファイルを作成」をクリック
  • 参照をクリック(新規CSSファイルを作成する)

CSSのstyle sheetを作成するには、新規フォルダが必要になる。

そのため、ファインダーからでも作成は出来るが、Dreamweaver上でも作れてしまうのはとっても便利!

  • 「CSSフォルダ」と「style.cssファイル」を作成する

フォルダ名は「CSS」とし、スタイルシートファイルを別名で「style.css」と保存しよう!

下記の画像をご覧ください!

  • style.cssが保存されると別シートが作成される

下図のように新しいCSS用コーディング画面が生成される。

実際にCSSコードを打ち込んでみよう!

見出しと段落にこのような形で色を付けたり、強調したい部分を加えることができます。

コメントアウトについて

メモを残したい場合、コメント非表示にしてコード画面に残すことができます。

その場合、/**/ で囲むとコメント非表示にすることができます。

まとめ

CSSデザイナーを使うと簡単にCSSコーディングが出来る。

コードヒント機能があるので、ある程度のコード名を覚えると簡単にコードが出てきて記述しやすくなる。

CSSコード画面では、p{}などの形をしようする。

コメントアウトも活用して、なるべく見やすいコード記述を心がけよう!








コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です