htmlとcss, javascriptの分離

html css javascript

html5

さて、そろそろ「html5」の時期が近づいてまいりました。
w3cからの勧告では
font要素,frame要素などデザイン性を持ったタグやユーザーインターフェイスに影響するタグは一切削除されます。

ブラウザもそれに対応するようバージョンアップしていくでしょうから、今までのhtml記法が通用しなくなってきます。

htmlとcss, javascriptの分離

今回はhtml(情報)とcss(デザイン)とjavascript(動的インターフェイス)の分離について。


サンプルhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE (省略)>
<html>
<head>
	<title>タイトル</title>
	<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jsapi.js"></script>
</head>
<body>
</body>
</html>

外部javascript呼び出しタグ 

<script type="text/javascript" src="js/jsapi.js"></script>

外部スタイルシート呼び出しタグ 

<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />


これらのような呼び出しタグで他のファイルと関連付けをすることで、htmlの情報とデザイン・機能との分離を行います。

メリットは外部ファイルを他のhtmlから呼び出すことで使いまわすことが出来る点。 同じ外部ファイルを呼び出している複数ページを一度にカスタマイズしたいときに重宝します。
また、余談ですが、、検索ロボットが取得する際、情報が最低限で済むので正しく情報を認識し、ランキングに反映させることができます。

cssによるhtmlとcssの分離

cssによるhtmlの分離と、要素の指定のしかたについて。
次のようなhtmlがあるとします 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE (省略)>
<html>
<head>
	<title>タイトル</title>
	<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jsapi.js"></script>
</head>
<body>
        <a id="aaaa" href="http://google.co.jp/">リンク</a>
        <span class="bbbb">文字</span>
</body>
</html>


style.cssは以下のサンプル 

#aaaa{
 color:#ff0000;
}
.bbbb{
 font-size:18px;
}

#〜〜〜　で id="〜〜〜"を指定
.〜〜〜　で class="〜〜〜"を指定

それから 各要素の{ }内部で付加するデザイン情報を記述します
color:#ff0000; は文字色を赤に (赤緑青の16進法)
font-size:18px; 　は文字サイズを18ピクセルに


idはそのhtml内で一度だけ指定するもの classはhtml内で何度も使ってかまいません
その性質上、idは一度指定したら処理を終えるので、要素指定の検索時の処理が高速です。再利用する予定のない固有の情報にはid指定を使ってください。