このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得

HOMEへ
> 無料ブログでアフィリエイト日記 > WEBデザイン・CSS > 外部CSSでサイトを効率良く管理する

WEBデザイン・CSS

外部CSSでサイトを効率良く管理する

2009年 5月 4日(月) 更新

サイトを運営していく過程で、サイト(記事)のボリュームが増えていくと、それに比例して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の外部ファイル化はやっておくべき対策だと思います。

この記事へコメントする






この記事へのトラックバック

トラックバックURL : http://business-affiliate.net/mt/mt-tb.cgi/99