トップページ > ホームページ作成 > 外部CSS/Javaファイル
HTMLの書き方です。「外部CSS/Javaファイル」では、スタイルシートとJavaスクリプトを外部ファイルで定義する時のHTLMファイルの書き方について、お教えします。
外部CSSファイル/外部Javaスクリプトファイル
スタイルシートCSSやJavaスクリプトの定義を外部ファイルで記述すると、HTML本体の内容が非常にすっきりし、解りやすくなります。メンテも楽になりますし、SEO対策にも有効です。HTMLへの書き方については、HTML 4.01 Specification (ja)をよく読めば解るとおもいますが、初心者には理解しにくいと思いますので、デジットさんの推奨の書き方をお教えします。
スタイルシートを使う場合
HTML本文内にスタイルシートを埋め込む場合は、必ずデフォルトスタイルシート言語を設定しなければなりません。デフォルトスタイルシート言語は、「<meta 」で次のように宣言します。スタイルシートは、全部外部シートで定義することをお勧めしますが、サンプルリストを組み込んだりする時、本文にスタイルシートが入ってしまう場合などありますので、念のためこの宣言を入れておいた方が良いと思います。
<meta http-equiv="Content-Style-Type" content="text/css">
外部スタイルシートCSSを利用する場合の宣言は次の通りです。ここでは、外部の「ext_css.css」というファイルを使うことを前提とします。スタイルシートは複数呼んでも大丈夫です。「ext_css2.css」というファイルも呼びたい場合は、次のように複数行書いてください。（外部ファイルは相対アドレスでもOKです。）スタイルシートで異なる定義がある場合は、後で定義したほうが有効になります。
<link href="ext_css.css" rel="stylesheet" type="text/css>
<link href="ext_css2.css" rel="stylesheet" type="text/css>
Javaスクリプトを使う場合
Javaスクリプトの場合も、考え方はCSSと同じです。HTML内に組み込みJavaスクリプトがある場合、デフォルトのスクリプト言語を指定しなければなりません。Javaスクリプトの場合は、次のように書きます。
<meta http-equiv="Content-Script-Type" content="text/javascript">
外部Javaスクリプトを使用する場合も、考え方はCSSと同じです。複数の外部Javaスクリプトファイルを使用する場合も、同じように複数行書けばOKです。「ext_jvs.js」という外部ファイルを使用する場合の書き方は、次の通りです。
<script type="text/javascript" src="ext_jvs.js"></script>
CSS/Javaスクリプトを使う場合のお勧めの書き方
以上説明してきましたが、初心者にはよく解らないと思います。その場合は、次のリストをコピーして使えばよいと思います。HTLMバージョンの宣言から必要なところが入っています。HTLM本体にCSSやJavaスクリプトを組み込んだとしても、問題の無い書き方です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="ext_css.css(外部スタイルシートのファイル名)" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext_jvs.js(外部Javaスクリプトのファイル名)"></script>
<title>ブラウザに表示されるタイトルを書く</title>
<meta name="keywords" content="キーワード1,キーワード2,…">
<meta name="description" content="このページの説明を書く">
</head>
<body>
本文を書く
</body>
</html>
強調されている所を変更すれば、そのまま使えます。最低限必要な定義は、全て書いてあります。HTMLが理解できてきたら、キーワードや
文字コードを「EUC」や「UTF-8」に変更したい場合は、「Shift_JIS」の部分を変更してください。
CSSやJavaスクリプトの外部ファイルを呼び込まない場合は、「<link href="ext_css.css …」や「<script type="text/javascript" src="ext_jvs.js …」の行は、削除してください。外部ファイルを使う場合は、自分の外部ファイル名に変更してお使いください。
「<meta name="keywords" content=" …」は、ページのキーワードを、「<meta name="description" content=" …」には、ページの内容を書きます。SEOには有効になりますので、記入することをお勧めします。この2行は、無くとも問題ありません。
がお薦め、
PHP5を使うなら