エントリー記事
外部ファイルの参照
CSSやJavaScriptを記述する方法には、次の2つがあります。
- HTMLに直接記述する
- HTMLファイルに直接CSS及びJavaScriptを記述します。非対応のブラウザが誤ってソースを表示するのを防ぐために、中身をコメント扱いとするのが通例でした。
<style type="text/css"><!-- /*CSSを記述*/ --></style><script type="text/javascript"><!-- スクリプトを記述 //--></script> - 外部ファイルを参照する
- CSS及びJavaScriptの中身を別ファイルとしてHTMLから呼び出します。別ファイルには中身のみを記述します。コメント扱いする必要はありません。
<link rel="stylesheet" type="text/css" media="screen" href="ファイル名.css" /><script type="text/javascript" src="ファイル名.js"></script>
HTMLでは上記どちらの方法でも問題ありませんでしたが、XHTMLにおいては、HTMLファイル内に直接記述すると問題を起こす恐れがあります。
- < , > , &を含むと機能しない
- 中身をコメント扱いすると機能しない
これらの問題は、CSS及びJavaScriptを別ファイルとすることで解決が可能です。
外部ファイル化は、他にも多くの利点があります。
- 管理更新の負担軽減
- CSS及びJavaScriptをHTMLに直接記述している場合、修正を行う際に全てのファイルを書き換える必要があります。同一の外部ファイルを参照することにより、1つのファイルを修正するだけで済むので管理更新の負担を軽減できます。
- ファイルの軽量化
- CSS及びJavaScriptをHTMLに直接記述している場合、全てのファイルに同じ内容を記述することになり、容量が大きくなってしまいます。同一の外部ファイルを参照することにより、ファイルの容量が軽くなり、ページの読み込みがより早くなります。
- 検索エンジン最適化
- CSS及びJavaScriptの記述は検索エンジンにとって意味を為さず、テキストの価値を相対的に下げてしまいます。不要な部分を外部ファイル化することによりテキストの価値を相対的に上げ、検索で上位にランクされる可能性を高めることができます。