■ CSS 設定の方法 その３
３．リンクを使って複数ページに適用する方法
CSS を設定する方法の最後はリンクを使う方法です。スタイルを適用したい HTML ファイルとは別に CSS ファイルを１つ作成して、そのシートに複数のページからリンクを張ります。
HTML ファイルを作成するのと同様に、メモ帳などのテキストエディタにスタイルを記述します。
スタイルの記述方法は下のとおりです。
div{
color:#ffa500;
font-size:20pt;
font-weight:bold;
text-decoration:underline;
}
前のページで説明した、「２．ページ全体に適用する方法」の <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 の設定方法について３種類説明しました。
１つ目の方法が、ページ内のタグに直接書き込む方法、２つ目がページ全体、３つ目が複数ページと、だんだん適用範囲が広がっていますね。
CSS の設定は適用範囲が細かい方が優先されます。１つ目が一番優先順位が高く、３つ目が一番低いことになります。したがって、全体を設定した後、一部のタグだけ違うスタイルを適用することが可能です。
このサイトのように同様のスタイルで多くのページを作成する場合は、まず外部 CSS ファイルを作成し、あるページだけに使うタグが出てきた場合２つ目の方法でスタイルを設定し、レアケースだけタグに直接スタイルを記述する方法を使うべきでしょう。
|
