ダイナミックＨＴＭＬ勉強会　第１回

ＨＴＭＬとスタイルシートの基礎知識

ダイナミックＨＴＭＬを勉強するにあたってＨＴＭＬのタグをすべて覚える必要はないらしい、それよりもＨＴＭＬとスタイルシートとスクリプトのそれぞれに役割分担させる事によって、どのようにＨＴＭＬをダイナミック（動的）に動かすかを学ぶ事らしい。
ＨＴＭＬタグで囲まれたブロックは操作される対象物と言うことからオブジェクトと呼ばれます。また、レイアウトの役目を担うスタイルシート、それらを動かすためのスクリプトをイベントハンドラとしてＨＴＭＬの中に記述します。

●ダイナミックＨＴＭＬを作成するために必要なもの

●とりあえずスタイルシートの基本を学ぼう！

スタイルシートはＣＳＳ１(Cascading Style Sheets Level 1)とも言います。スタイルシートはレイアウトを担うといいましたが、それぞれのＨＴＭＬタグについての配置、フォント、装飾などの指示を与えるものです。まずは，以下のソースを見てみましょう。
ファイル名：css.html
<html>
<head>
<title>スタイルシートの基本</title>
<style type="text/css">
<!--
h1{color:red}
p{font-size:16pt;font-style:italic}
-->
</style>
</head>
<body>
<h1>この部分は赤色で表示されるはずです</h1>
<p>
１６ポイントの文字の大きさでイタリック（斜体文字)で表示されます<br>
スタイルシートはテキストの書体や大きさ、色、位置など細かい指定ができます。
</p>
</body>
</html>
スタイルシートは、<style>〜</style>タグで囲まれた部分で、typeにはスタイルシートの種類を記述します。
この場合の"text/css"は一般的なカスケーディングスタイルシートで指定されるようです。
<!-- 〜 -->の部分は、通常注釈（コメント）と認識されブラウザには表示されない部分ですが、これはスタイルシートが使えないブラウザで閲覧したときその部分の内容を表示させないようにするためのものです。<head>タグ内で画面に表示されるのは<title>タグ内のウィンドウ名だけですから必要はありませんけどね（笑）

<html>〜</html>は、ＨＴＭＬの開始及び終了です。
<head>〜</head>は、ページに関する指定を行う部分です。
<title>〜</title>は、ページのウィンドウ名です。
<body>〜</body>がブラウザに表示される部分です。
スタイルシートは次のような基本形を持ちます。

タグ名｛プロパティ：設定値｝

それでは、スタイルシートの設定をしている部分を見てみましょう。
h1{color:red}
このh1は、<h1>タグのことを指しています。
<h1>〜</h1>,<h2>〜</h2>・・・・<h6>〜</h6>は、見だし部分のサイズを指定します。（１が最大）
つまり、<h1>〜</h1>タグで囲まれた部分に適用すると言うことです。そして、h1に対するスタイルシートの設定を｛｝内に記述します。
｛｝内に記述されたcolorはテキストの色を決めるための設定でスタイルシートプロパティと呼ばれます。例文では、文字色を赤に設定しています。
p{font-size:16pt;font-style:italic}
上記の設定では，<p>〜</p>タグで囲まれた部分のフォントサイズを１６ポイントに、フォントスタイルを斜体にしています。
複数指定する場合は；（コロン）で区切ります。
<p>〜</p>は、新しい段落を作成します。

戻る　第２回へ