複数のページに同じスタイルを適用する
ここまでスタイルシートの書き方の基本を解説してきましたが、その前にスタイルを何処に書けばいいのかを解説してきませんでしたので、今からそれを解説します。スタイルを何処に書くかはスタイルをどれくらいの範囲に適用するかで変わります。
このページではタイトル通り複数のページにスタイルを適用する方法を解説します。
この複数のページにスタイルを適用する方法は、一番おすすめというか、普通はこの方法を使います。
一つのページや特定の箇所だけにスタイルを適用する方法も解説しますが、おすすめはできません。
複数のページにスタイルを適用するには、まずスタイルシートファイルを作り、それを適用したいHTMLファイルから参照します。
スタイルシートファイルとは、スタイルを羅列しただけのファイルです。
メモ帳を開いてこれまでに解説した書き方で、スタイルを書いていきます。
例えば
h1 { color:red; }
h2 { color:blue; }
h3 { color:lime; }
.style1 { font-size:20pt; color:blue; }
のように書きたいだけスタイルを記述していきます。他に書くことはありません。
そして保存するときにHTMLファイルと同じように「すべてのファイル」を選択し、ファイル名の後にスタイルシートファイルというのを表す.cssをつけます。
そしてそのスタイルを適用したいHTMLファイルから、そのスタイルシートファイルを参照します。
HTMLファイルの<head>～</head>の間に
<link rel="stylesheet" href="スタイルシートファイルのファイル名.css" type="text/css">
を書き入れます。
例えば作ったスタイルシートファイルのファイル名がsite-style.cssという名前なら
<link rel="stylesheet" href="site-style.css" type="text/css">
となります。
もちろんパスが重要ですよ。同じフォルダにあるならファイル名だけでOKですが、違うフォルダにあるならもちろんパスを使って指定しなければなりません。
2006年04月30日