外部スタイルシート

スタイルシートを定義する場所は、これがメインです。

この方法は、サイト全体に、定義したスタイルシートを適用させることができるので、
サイトの管理・変更が、かなりかんたんになります。

それでは、まず、外部スタイルシートをつかった、全体像を見てみましょう。



外部スタイルシートとは、１つのファイルのことです。
ふつうのファイルには、ＨＴＭＬやらのタグをわんさか書いていますが、
このファイルには、 スタイルシートの定義だけを書き込みます 。

そして、 ヘッダー部分からリンクをはって 、つかいたいページに、
このファイルを呼び出すことで、
そのページに外部スタイルシートで定義された内容が、適用されます。

感覚的には、まさにスタイルシートの取説。

ヘッダー部分から、リンクをはることで、
「 このページのスタイルシートは、この外部スタイルシートに書かれてあるとおりになってます。 」
ということを、ブラウザに教えてあげているんですね。

ですから、図の<Ｈ１>部分は、外部スタイルシートの設定どおり、
赤色で表示されることになります。

前のページで紹介した、 ヘッダーに定義する方法 の、
ヘッダーに定義した内容を、そっくり、
外部スタイルシートに移し変えているという見方もできるます。（下の図参照）



移し変えてから、代わりにリンクをはることで、スタイルシートを適用させるということになります。

いろんなページから、この外部スタイルシートにリンクを張るだけで、
その定義された、スタイルシートを適用できるので、サイト管理がすごい楽になりますし、

変更する場合でも、外部スタイルシートの定義内容を、変更すれば、
リンクして呼び出しているページにも、
変更が反映されるので、とっても便利な方法です。

それでは、ちょっとした注意点を。

まず、 外部スタイルシートのファイル名 ですが、
拡張子が「．ｃｓｓ」であるなら、その前は、好きなファイル名でＯＫです。


それから、リンクを設置するページですが、次のような形でリンクを設置して下さい。


そのページからの、外部スタイルシートまでの道筋を、
書き込んであげてください。

それから、<ｈｅａｄ>〜</ｈｅａｄ>の間に、このリンクを書き込まないと、
適用されませんので、気をつけてください。


次からは、いよいよ、スタイルシートによる、
レイアウトの方法を解説していきます。

脱テーブル目指してがんばりましょー！