CSSを使うにはいくつか方法があるのですが、外部ファイルとして扱う方法が一番です。
なぜ外部ファイルとして扱うのが一番かというと、複数のHTMLファイルで一つのスタイルシートを共有できるからです。
スタイルシートを共有すると、一つのスタイルシートを変更するだけで、読み込み元のHTMLファイル全てのデザインの変更できるので、数十、数百ページある大規模なサイトなどでは、その効果が実感できるかと思います。また、CSSファイルがキャッシュに残るので同じスタイルを何度も読み込む手間が省けます。
外部スタイルシートを読み込むにはHTMLの<head></head>内に以下のタグを埋め込むだけです。
<link rel="stylesheet" type="text/css" href="css/sample.css" />
この一行だけで完了です。
ちなみにこれは「css」フォルダ内の[sample.css]ファイルを読み込む場合です。
これだけでは読み込めたか分からないので、実際にスタイルを指定してみます。CSSファイルに下記のコードを書き込んでみてください。
@charset "shift_jis";
body{
background-color:#0000FF;
}
背景が青くなっていれば読み込み成功です。
「@charset "shift_jis";」は必ず1行目に書きます。これは使用する文字コードを宣言するもので、これを指定せずに日本語を使用すると、文字化けが起こるので注意！！
ちなみに「body{background-color:#0000FF;}」はbody要素に背景色を指定しています。
次回は、スタイルシート構文についてです。（おそらく。
