外部CSS(スタイルシート)のとは?


外部CSS(スタイルシート)は使えるととても便利だけど理解するのが他の方法に比べて多少難しい方法です。

[1]---外部CSS(スタイルシート)って何?

いつも皆さんが作っているホームページのファイル形式ってご存知ですか? いつも作っているホームページと言うのはURLの最後を見てみると分かるように 〜.htmlとなっていますよね。
これがいわゆる[HTMLファイル]というものなのです。

簡単なはなし、このファイル形式を〜.cssとファイル名を変えて作成するだけで [CSSファイル]になってしまうと言うものです。

外部スタイルシートを使うと言うのはつまりいつもホームページを作っている[HTMLファイル]から 作成した[CSSファイル]を呼び込むと言うものなのです。

[2]---何が便利なの?

[1]でも解説したように[HTMLファイル]から[CSSファイル]を呼び込むことでスタイルシートを 適用できるので、例えば[a.html][b.html][c.html]という3っつのページで[sample.css]という CSSファイルを呼び込んでいたとします。

そして[sample.css]で<h1>〜</h1>というタグで囲まれた文字(〜部分)を赤い文字にする ように指定します。

次に[a.html][b.html][c.html]各ページで<h1>〜</h1>タグを文字に使用します。 [<h1>〜</h1>タグを使用した文字を赤くする]と指定された[CSSファイル]を呼び込んでいる わけですから各ページで文字に色をつける指定をしなくても<h1>〜</h1>で囲まれた文字は 赤になります。 

何が便利かというと、例えばこの[a.html][b.html][c.html]という3っつのページの文字を 赤から青に色を変えたい場合、外部CSSを使用していないとそれぞれのファイルのソースを 開いて赤い文字にしているカラーコードを青のカラーコードに書き換えていかなければなりません。

しかし外部CSSを使用していると[sample.css]のCSSファイルだけを書き換えれば それぞれ[a.html][b.html][c.html]のソースを書き換えず変更することができます。