外部CSS/Js化

HTMLをスマートに

最近はブロードバンドの普及による回線の高速化も後押しして、インターネット利用者が増え、それに応じてWEBサイトにはデザインや利便性が求められるようになり、より凝った作りのWEBサイトも多く見かけるようになりました。

デザインや利便性の向上にはCSSやJavascriptなどが不可欠であり、これらが広く普及した大きな要因として、HTML内に記述できる容易さがあげられます。

しかし、CSS(スタイルシート)やJavascriptはHTMLと組み合わせることで見栄えや動作を制御する設定情報に過ぎません。

ですから、HTMLの文章内に直接記述しても、検索エンジンなどには無益な情報です。CSSやJavascriptは外部ファイル化し、明確にHTMLと切り離すことでHTMLをスマートにさせましょう。

外部ファイル化で検索エンジンに登録されやすくなる

検索エンジンはページ全体の情報のうち、特に冒頭部分に書かれた内容を重視します。

従って、ページの上部に、やたらとCSSやJavascript情報が書かれていると、本来すぐに文章が始まる部分をこれらが占領するため、ページ全体のキーワード密度が下がり、検索エンジンに登録されにくくなってしまいます。

CSS(スタイルシート)やJavascriptを一括管理することで更新が楽になる

例えば、文字色を変えたいときでも・・・CSSやJavascriptを外部ファイル化し、すべてのページで同じCSSやJavascriptファイルを読み込むように設定すると、HTMLとこれらが切り離されるため、以後のメンテナンスはCSSやJavascriptファイルの内容を書き換えるだけで良く、少しの操作ですべてのページに変更内容を反映させることができるようになるのです。

外部ファイルを用意する

まずは、設定情報の元となるCSSやJavascriptファイルを作成することから始めます。

すでに、HTML内にこれらの情報を直接記述している場合は、その部分(<head>〜</head>内に書かれたスタイルシートやJavascriptなどの情報)をコピーして、メモ帳などに貼り付け保存します。

また、新たにCSSやJavascriptファイルを作成する場合は記述例に従って記入し、保存してください。

それぞれのファイルの拡張子は以下になります。

外部ファイルの保存拡張子

属性 拡張子
CSS(スタイルシート) [*.css]
例:style.css
Javascript [*.js]
例:style.js

CSSの記述例

/* カラー指定 */
.red {color : red ;}
.blue{color : navy ;}
.white{color : white ;}
.black{color : black ;}
.orange{color : #ff6600 ;}
.green{color : green ;}
.gray{color : #cccccc ;}

外部ファイルを読み込む

次に作成したCSS(スタイルシート)やJavascriptの外部ファイルを呼び出す記述をこれらの情報を読み込ませたいHTML内の「<head>〜</head>」内に以下のように記述します。

外部CSSやJavascriptの呼び出し方

属性 記述例
CSS(スタイルシート) <head>
<link
rel=“stylesheet” href=“css/style.css” type=“text/css”>
</head>
Javascript <head>
<script
type=“text/javascript” language=“JavaScript” src=“js/roller.js”></script>
</head>

※CSSは「href=””」で、Javascriptは「src=””」でファイル場所を指定します。

スタイルシート(CSS)やJavascriptは外部ファイル化することで、HTMLをスマートにさせることが出来るだけでなく、検索エンジン対策としても有効な手段です。積極的に取り入れましょう。
スタイルシートについて詳しく教えて

スタイルシート辞典

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

CSSを駆使したモダンなWebデザインを学ぶなら

SEOについて学ぶなら

最新情報をチェックしよう!