【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の基本についてはこちらの記事にまとめています。