ヨスのCSS講座

【CSS講座】CSSの記述を外部ファイルにする理由

CSSの記述を外部ファイルにする理由についての情報をまとめます。

CSSの3つの記述場所を見てきましたが、なぜ「外部ファイル」が良いのでしょうか?

これは、CSSを訂正する箇所が1箇所で済むからです。

たとえば、こんなふうにCSSを直接記述していたとします。

<h2 style="font-weight:bold; color:red; font-size:30px;">わたしがキットカットを大好きな理由</h2>
<p>文章</p>
<h2 style="font-weight:bold; color:red; font-size:30px;">キットカットの思い出</h2>
<p>文章</p>

※ ちなみに見出しを太くして色を赤くして、大きさを30pxに変更する指定です。

これが何を表しているのかというと、見出し部分(<h2>タグの部分)に毎回毎回<h2 style="font-weight:bold; color:red; font-size:30px;">というふうにCSSを直接指定しています。

じつは、これがのちのちの問題になるのです。

気が変わってデザインを変えたくなったとき

「のちのち」という表現を使いましたが、それは「気が変わってデザインを変えたくなったとき」です。

「見出しの色を赤にしたけど、やっぱり緑に変更したい」のように。

そんなときに、記事内に書いている「color:red;」をすべて「color:green;」に手直しする必要がでてくるのです!

もし100記事書いていて、1記事に5つの<h2>を指定しているとすると……500か所を直さなくてはならないです。

では、外部ファイルでCSSを書いていたらどうなるのでしょうか?

外部ファイルだと変更箇所は1箇所のみ

今度は、「外部CSSファイル」内にこんなふうに書いていればどうでしょうか?

h2 {
    font-weight : bold ;
    color : red ;
    font-size : 30px ;
}

外部CSSファイル」内に書いている「color:red;」を「color:green;」に変更するだけで完了です。

つまり、「外部CSSファイル」を使っていれば、1か所を直すだけで全ページのデザインが変わります。

わたしが「外部CSSファイル」をオススメする理由が伝わりましたか?

「ヨスのCSS講座」トップページへ

「ヨスのCSS講座」のトップページはこちらです。

CSS講座のトップにもどる

CSSの基本はこちらです

CSSの基本についてはこちらの記事にまとめています。