スタイルシートを適用

Home>Dreamweaver>サイト作成手順>スタイルシートを適用

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

「サイト」を生成したら、適用するCSSをつくります。
なぜ最初にCSSファイルをつくるのかというと、基本的にHTMLにおける装飾の部分はCSSで設定することが望ましいとされていることもありますが、実際CSSで設定した方が便利だからです。

CSSの利点

CSSの利点は以下の3点につきます。

  • 一つのCSSの設定を複数のファイルで共有できる
  • ソースコードがすっきりするのでファイルの容量が減る
  • クローラが内容を理解しやすくなるのでSEO上も効果がある

たとえばフォントの大きさや色はHTMLのfont要素で変更することもできます。
しかし、その場合、色や大きさを変えたい場所に適宜fontタグを配置しなければならず、ファイルの容量は大きくなってしまいます。

これをCSSにすると、たとえばp要素の大きさや色を統一することを一括してできるため、font要素を配置する必要はありません。
他の要素に関しても、CSSを使えばソースコードをすっきりさせることができます。

ただし、そのためにはCSSをHTMLファイルに設定するのではなく、外部ファイルとして読み込む必要があります。

以下ではその方法を解説します。

CSSを外部ファイル化する

まず大元となるHTMLファイルをつくります。

[ファイル]->[新規]を選択すると、[新規ドキュメント]ダイアログボックスが表示されます。

HTMLファイルを新規作成する

まだ何もファイルがないので、とりあえず[空白ページ]->[HTML]->[<なし>]を選んで[作成]をクリックします。

空白ページが生成されます。

次に、[テキスト]->[CSSスタイル]->[新規]をクリックします。

CSSスタイルの新規作成

[新規CSSルール]というダイアログボックスが開きます。
ここでは[詳細設定]にチェックを入れ、[名前]を[#header]とします。
また、[定義場所]が、[新規スタイルシートファイル]になっていることを確認してから、[OK]をクリックします。

新規CSSルールの作成

作成するスタイルシートファイルの保存場所を指定する画面になります。
サイト内の適当な場所に保存します。

スタイルシートファイルの新規保存

ファイルを保存すると、今設定した#headerに関するCSSの設定画面になります。

この画面で設定してもいいですが、今回はCSSファイルを新規作成するだけなので、ここは何もせずに[OK]をクリックします。

CSSルール定義ウィンドウ

[OK]をクリックすると、CSSファイルが生成され、同時にDreamweaverの作業画面に表示されます。

CSSが新規作成された

あとは、このCSSファイルにスタイルシートを入力していきます。

なお、CSSファイルを新規作成するのであれば、[ファイル]->[新規]->[空白ページ]->[CSS]でも構わないのですが、この方法だと作成したCSSファイル後でHTMLドキュメントに関連付けなければなりません。このページで紹介した方法であれば、同時にHTMLドキュメントへのCSSファイルのリンクも行うので手間が省けます。

関連リンク

よく読まれている記事

UpDate:2010-6-17