CSSレイアウトの魅力－容易なデザイン変更

外部ファイルによるCSSの記述では、サイト内の全てのページから外部CSSファイルに対しリンクをはる形になりますが、この外部ファイルでの記述を修正することで、各ページで使われている同じid・クラス名の部分を一括して変更することができます。

例えば、全てのページで「背景色を赤、文字色を白」という部分があったとします。この部分に「class="bgRedFontWhite "」というクラス名を当て、外部CSSファイルに以下のように記述します。

[CSSの記述例]

  1. .bgRedFontWhite { background:#ff0000; color:#ffffff; }  

このような状態から背景色を黒に変更したいときは、外部ファイルの背景色の指定部分「bakcground:#ff0000」を「bakcground:#000000」に変更することで、「class="bgRedFontWhite "」が記述された部分全ての背景色を一気に変更することができます。

背景色以外にもサイトの幅やフォントサイズ、罫線の有無・色など、共通のid・クラスを付けた部分であれば同じように変更できるわけですが、ホームページビルダーを利用している場合などでは、全ページに共通の部分に変更を加えようとすると全てのページに修正をかけなければならず、とても手間がかかります。その手間を、CSSを利用（外部ファイル化が前提）することで、大きく軽減させることができます。