Link to .CSS

次は .CSSファイルへのリンクによる指定の方法です。毎回 Inline Style で記述するのは面倒なので、Style をまとめて記述したファイルを作り、HTML ファイルにリンクさせようというものです。

まず、僕がこのドキュメントでリンクしている .CSSファイルを示します。（後に変更されているかもしれません）

　
/* The Style Sheet of My Document */
BODY {
	font: 12pt/15pt "ＭＳ Ｐゴシック";
	color: black;
}
H1 {
	font: 26pt/30pt Arial;
	color: teal;
}
P {
	font: 12pt/15pt "ＭＳ Ｐ明朝";
	color: black;
}
TT {
	font: 16pt/80%;
	color: black;
}
.times {
	font-family: "times new roman"
}
.mincho {
	font-famiky: "ＭＳ Ｐ明朝";
}
.gothic {
	font-family: "ＭＳ Ｐゴシック";
}
A:link {color: blue}
A:visited {color: navy}
A:active {color: red}
　

まず最初の一行目は見て分かるようにコメントです。C言語風ですね。これはスタイルファイル中の何処にでも記述できます。
その後にスタイルの指定が並びますが、Inline Style とはちょっと文法が異なります。

最初に BODY や H1 などスタイルを指定したいタグを書いて、指示内容をブレース ({})の中にセミコロン(;)で区切って並べます。ブレースを閉じる直前のセミコロンは、あっても無くても構いませんが、書いておくと後で指示を書き加えた時にセミコロンを書き忘れることが無くていいと思います。

並べる指示は Inline Style と同じように、要素：値、と書きます。ちょっと違うのはフォント名にスペースを含む時に Inline Style ではシングルクォートで挟みましたが、ここではダブルクォートで挟みます。

Note: Internet Explorer 3.0x では、スタイルファイル中に BODY の background を指定しても何故か無視されてしまいます。ま、<BODY BGCOLOR="#xxxxxx"> で指定すればいいんですけどね。

それ以外のスタイルの設定の意味は後の説明を見ていただくことにして、このスタイルファイルをリンクする方法を説明します。

上記のファイルを mystyle.css というファイル名で保存しておくと、HTML ファイル中で以下のようにして呼出せます。

　
<HEAD>
　　<TITLE>タイトル</TITLE>
　　<LINK REL="STYLESHEET" HREF="mystyle.css" TYPE="TEXT/CSS">
</HEAD>
　

HTMLファイルの <HEAD> タグ中で指定します。たったこれだけで貴方のホームページもスタイルシート対応のクールなページになります（笑）。

Inline Style で指示するよりも遥かに楽チンなので、誰かが作った CSSファイルをリンクするのが良いでしょう（再笑）。