投稿日時:
HTMLとCSSを別のファイルに記述するのは、そもそもなぜでしょうか? また、どのようなメリットがあるのでしょうか?
Webサイトを運用する人によって主な理由は異なってくると思われますが、共通する理由は「コーディングの効率向上」となります。

例えば20ページ程の分量のWebサイトを持っていたと仮定しましょう。
公開後から、Webサイトの来訪者数も順調に伸びています。
さて、これから新年を迎えるにあたって、Webサイトの「内容(コンテンツや文章のことです)はそのまま」に、新しいデザインに変えようと決めました。

その時、あらかじめCSSを分けた場合と、分けていない場合で、新しいWebサイトのデザインをコーディングする効率に差が出てきます。

CSSを別ファイルに分けておいた場合では、外部ファイルとして保存したCSSを変更するだけで、Webサイトの内容を変えずにデザインのみを変更することが可能です。
すでにid名やclass名はある程度定義していますから、既存のid名・class名のタグの装飾だけを変えることは、容易に可能となります。
また、HTMLのソースコード自体もすっきりします。

一方で、CSSを分けずにタグに直接書き込むか、スタイルタグでヘッドタグの中にCSSを置いている場合は、20ページすべてのソースコード、ヘッドタグの中を巡回し、一つ一つのタグのデザインを変えていくことになります。
コーディングとは、半角スペースが空いていないだけでもレンダリング結果が正常に表示されない、ある意味で繊細な作業を必要としています。その作業が20ページも続くのは、労力としては非常に大きいです。
将来会社が拡大して、WEBページが50ページ、100ページになったら…と将来的な視点も予見できるかと思います。例えばショッピングサイトでは、50ページ100ページというのはめずらしくない分量です。
直接HTMLのソースコードに書く分量増えればそれだけ見た目もごちゃごちゃしますし、全体のソースコードを見る際のスクロールという手間も増えることになります。

ただし例外的に、非常にコーディング自体の量が少ないデザイン(例えば全てのHTMLのソースコードが20行など)で、かつWebページ自体のボリュームも非常に少ない場合があります。
このような場合で、次回の更新でもWebページを増やす見込みがないときは、外部ファイルとしてCSSを作成する恩恵を受けにくいかもしれません。
(ただしこのような場合でも、すっきりしたソースコードをお望みの方は、外部ファイルとしてCSSを保存することをおすすめします。)

初めはCSSを外部ファイルで保存することに慣れないかもしれません。
しかしせっかく作り上げたWebサイトです。
流用が出来るところはできる限り流用し、新しいWebデザインを効率よく実現してまいりましょう。
そのための一つの方法として、最初からCSSを外部ファイルとして保存し、HTMLと切り分ける方法をお薦めしたいと思います。

(担当:斉藤 万幾子