外部スタイルシート

◆　外部スタイルシート

スタイルシートはもはや、WEBページのレイアウトや表現に欠かせないものといえます。現に、W3Cでは、ページのレイアウトは全てスタイルシートで行なうとなっています。大変便利なこのスタイルシートですが、実際にページ内に書き込まれてなくてもよいということを知っていますか？

スタイルシートの指定は<BODY>～</BODY>内で、特定のタグに指定することによってそのタグにスタイルがかかります。そして、<HEAD>～</HEAD>内で、あるタグにスタイルを指定したとするとそのページ全てのそのタグにスタイルがかかります。このスタイルシートを更にページの外において、そのスタイルシートへのリンクを貼るようにすると、サイト内全てのスタイルを指定することができるようになります。極端にいうと、ち密な計算をしてサイトを構築していけば、この外部のスタイルシートを書き換えるだけでサイト内全てのページの更新（レイアウトの変更）ができるということになります。

◆ 記述方法

大変簡単です。通常<HEAD>～</HEAD>内でスタイル指定しているものをそっくりメモ帳に貼ればいいのです。そして、好きなファイル名を半角英数でつけ、拡張子を.cssとして、保存します。ページ内で、下記のようなスタイルが指定されていた場合、赤字の部分をメモ帳などに貼り付けて保存すればよいというです。

◆ リンクの貼り方

そして、残った
<STYLE type="text/css"></STYLE>を消し、かわりに

<LINK rel="stylesheet" type="text/css" href="abc.css">

と記述します。すると、このリンクを貼ったページ全てに、保存したスタイルがかかります。
相対パス指定などがよくわかっていない人は、http://からの記述でも構いません。

また、一度読み込んだ外部スタイルシートは、ユーザーのPC内にキャッシュとして保存されます。次回、同じ外部スタイルシートの指定をしているページを開こうとした際、ブラウザはいちいちそのスタイルシートをサーバーからダウンロードしようとはしません。
キャッシュとして保存されているユーザーのPC内からその外部スタイルシートを持ってくるわけです。ダウンロードをせずに、自分のPC内から持ってくるのですから、アクセス時間はかからないに等しいと言えるでしょう。
また、外部スタイルシートのファイルは、そのサイトの構成等にもよりますが、ほんのわずかにしかなりません。10KBもあったら、それはかなりち密なサイトといえるでしょう。
スタイルシートの指定に、ID名やクラス名をうまく使ってホームページを作成していくとデザインの統一された、軽いサイトを作成することができます。

この外部スタイルシートとJavaScriptをうまく利用し、サイト内全ページの配色や画像などを変えるという方法を考えましたので、その解説も興味のある人は見てみてください。

時間によってサイト内全ページの色を変更する

 曜日によってサイト内全ページの画像を変更する