CSSを全てのページに適用

これまでの説明は、スタイルの定義をHTMLファイルに記述するものでしたが、スタイルの定義を別のファイル（CSSファイル）に記述しておき、Webページに適用する方法を説明します。スタイルの定義をCSSファイルに記述しておくことで、どのページにも一貫したスタイルを適用することができます。これで、かなりの手間と時間を省くことができます。

CSSファイルにスタイルの定義を記述しておきます。HTML側には、CSSファイルを読込むように設定しておきます。これで、どのページにも一貫したスタイルを適用することができます。

例えば、CSSファイルに「<h2>の文字色を赤にする」スタイルを記述しておけば、どのページに対しても<h2>の文字色は赤になります。

CSSファイルを読込むように設定

この段階では、まだCSSファイルを作成していませんが、とりあえず、HTML側でCSSファイルを読込む設定をしておきましょう。

CSSファイルを読込むようにするには、<head>要素に、<link>タグを使用します。



<html>


    <head>


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


        <title>タイトル</title>


    </head>


    <body>


        <h2>外部スタイルシートの読込</h2>


        <p>page_styles.cssを読込


        </p>


        <h2>チェック</h2>


        <p>うまく読込まれるでしょうか。


        </p>


    </body>


</html>

この時点では、まだCSSファイルを作成していないので、何のスタイルも適用されません。CSSファイルの作成については、次ページで説明します。

<link>タグ

rel属性

rel属性は、この文書自体から見て、読込む（href属性で指定された）文書がどのような関係であるのかを指定します。ここでの関係はスタイルシートなので、href属性の値には「stylesheet」と記述します。

type属性

type属性は、読込むファイルの形式（MIMEタイプ）を定義します。ここではCSSファイルなので「text/css」と記述しておけばOKです。

href属性

この属性には、<a>タグのhref属性と同様、読込む（リンク先）ファイルのパスを記述します。絶対パス、相対パスのどちらでも良いです。

ここでは、「href="page_styles.css"」と記述して、同じディレクトリにあるpage_styles.cssというCSSファイルを読込むように設定しています。

CSSファイルを読込むには、<link>タグを使用
rel属性には「stylesheet」と記述
type属性には「text/css」と記述
href属性にはCSSファイルのパスを記述