サイトを運営していく過程で、サイト(記事)のボリュームが増えていくと、それに比例してCSSの記述も多くなってくるかと思います。そんな時を見据えて外部CSSでサイトを構築しましょう。
基本的にCSSを記述する時には「内部CSS」か「外部CSS」か、2つの選択肢が存在しますが、サイトの効率的な運営管理、SEO対策、デザインの統一性などを考慮すると、基本的に内部CSSは論外です。
内部CSSと外部CSS
内部CSSはページ毎の<head>~</head>内に記述するもので、
<style type="text/css">
<!--
適用するタグ名{
プロパティ等
} -->
<style>
と記述します。対して外部CSSは、
<link rel="stylesheet" href="http://●/○.css" type="text/css" />
という風に記述し、●の箇所にCSSファイルのURLを、○の箇所にはCSSファイルの名前を記入し、外部CSSファイルの在り処(リンク先)を指定します。
そうすることで、リンク先にある(外部)CSSファイルを読みに行き、記述された内容が反映される訳です。
仮にサイトのページ数が1000ページあった場合に、CSSで指定してある背景画像を変更しようとします。
内部CSSで構築してしまったサイトでは、1000ページ全てのCSSファイルにおける、背景画像の指定箇所を変更しなければなりません。
反面、外部CSSファイルで指定しておけば、その1ファイルを変更するだけで全てのページの背景画像が変更されるのです。
もちろん、構築段階で全てのページに上記のような外部CSSファイルへのリンクを記述しておくことが前提です。
外部CSSで構築することで発生するメリットは、このような作業効率化の面からだけではなく、SEO対策の観点からも非常に良いとされています。
検索エンジンのロボットがサイトを巡回してデータ収集する時は、ページの上部から順に読んでいきます。
その時あまりにもページの内容が多いと、一番下まで読まないという説があるため、極力ソースコードはシンプルにしておく方が無難です。
特にYahoo!検索エンジンにおいては、ソースコードがシンプルである事や、W3Cへの準拠度を重視する傾向があるので、CSSやJavascriptの外部ファイル化はやっておくべき対策だと思います。