HTML5 入門（1） HTML,css,JavaScript(jQuery) それぞれの役割と典型的な書式

JavaScript jqhtmlcss

①HTML・・・文書をタグにより構造化する。
例）見出し1をh1(...heading 1)タグで、本文をp(..paragraph「段落」)タグで囲い構造化する

<html>
<head></head>
<body>
<h1>私のページ</h1>
<p>これは私のページです</p>
</body>
</html>

②css・・・HTMLのタグに対し、装飾に関する情報を付加する。
例）上記body(本体)に背景色を＃E0FFFFに指定、h1、pにもそれぞれ文字サイズ、カラー、空白等を指定

body	{background:#E0FFFF;}
h1	{padding: 10px;font-size: 12pt;color: #888888;}
p	{font-size: 10pt;}

③jQuery・・・HTMLとcssを動的に制御する。
例）見出し1(h1)をクリックすると文字サイズが大きくなり、1000ミリ秒後、元のサイズに戻す。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () { 
	$("h1").click(function(){
　　　　var $element = $(this);
	$element.css("font-size","24pt");
　　　　setTimeout(function (){
    　　$element.css("font-size","12pt");
    　　},1000);
  });
});
</script>

Bjorkのサイト（http://bjork.com/）がHTML5でリニューアルして話題になりましたが、このサイトも基本的にこれらの3つの技術で作られています。


次の記事：HTML5 入門（2）HTML5の用途 - dentaq log