外部ファイルで外部ファイルを参照/CSS、Javascript
2010/06/21
CSSとかJavascriptで参照するファイルが多いとHTMLの内に色々と書かないといけなくなる。
<link rel=”stylesheet” type=”text/css” href=”/css/style.css”>
こんな感じなのをいっぱい書けばいいだけなんだけどソースの見た目が少し嫌。
で、CSSの方からだと上記の「style.css」から他のCSSファイルを読み込む方法として「style.css」に下記みたいなのを追加する。
@import url(“./color.css”);
この場合だったら「style.css」と同じフォルダ（=「./」）の「color.css」を読んでくれる。
記述方法は他にもある。
CSSはこんな感じでいいんだけど「Javascriptはどうするよ？」ってことなんだよね。
色々と方法はあると思うんだけど個人的に好きな書き方は下記。
■HTMLに書く内容
<script type=”text/javascript” src=”head.js”></script>
<script type=”text/javascript” src=”head.js”></script>
■「head.js」に書く内容
document.write(<script type=”text/javascript” src=”foo.js”></script>);
HTMLファイルでまず「head.js」を読み込む。
そうすると読み込まれた「head.js」でJavascriptを読み込むタグを書き出してくれる。
あとは、好きなだけファイルを増やせばいいという感じ。