超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ CSS 設定の方法 その3

3.リンクを使って複数ページに適用する方法

CSS を設定する方法の最後はリンクを使う方法です。スタイルを適用したい HTML ファイルとは別に CSS ファイルを1つ作成して、そのシートに複数のページからリンクを張ります。
HTML ファイルを作成するのと同様に、メモ帳などのテキストエディタにスタイルを記述します。
スタイルの記述方法は下のとおりです。

div{
 color:#ffa500;
 font-size:20pt;
 font-weight:bold;
 text-decoration:underline;
}

前のページで説明した、「2.ページ全体に適用する方法」の <style> タグで囲まれた部分と同じですね。
別に作成した CSS ファイル(外部 CSS ファイル)には、<style> タグやコメント部分は必要ありません。設定したいタグおよびタグに対するプロパティとその値を記述するだけです。外部 CSS ファイルは、拡張子 .css で保存します。この保存形式で、ブラウザが CSS ファイルということを認識します。

CSS ファイルが出来たら、適用したい HTML ファイルからリンクを張ります。
リンクには <link> タグを使います。外部 CSS ファイルの名前を「 style_1.css 」とすると、スタイルを適用したい HTML ファイルのソースはこうなります。

<html>
<head>
<title>リンクを使って複数ページに適用</title>
<link rel="stylesheet" href="style_1.css" type="text/css">
</head>
<body>
<div>王様の耳はロバの耳</div>
</body>
</html>

もちろん、外部 CSS ファイルが違うフォルダ(サーバー内ではディレクトリ)にある場合は、 href="フォルダ名/ファイル名" になるよね。一つ上の階層の場合は href="../ファイル名" となるのは、HTML タグのリンクといっしょです。

<link rel="stylesheet" href="****.css" type="text/css">


CSS の設定方法について3種類説明しました。
1つ目の方法が、ページ内のタグに直接書き込む方法、2つ目がページ全体、3つ目が複数ページと、だんだん適用範囲が広がっていますね。
CSS の設定は適用範囲が細かい方が優先されます。1つ目が一番優先順位が高く、3つ目が一番低いことになります。したがって、全体を設定した後、一部のタグだけ違うスタイルを適用することが可能です。
このサイトのように同様のスタイルで多くのページを作成する場合は、まず外部 CSS ファイルを作成し、あるページだけに使うタグが出てきた場合2つ目の方法でスタイルを設定し、レアケースだけタグに直接スタイルを記述する方法を使うべきでしょう。