Chapter 02 「JavaScriptとHTMLとCSS」 ■JavaScriptとHTMLとCSSの関係 JavaScriptでプログラムを作る前に少し覚えておかないといけないものがあります。それは １：HTML ２：CSS（スタイルシート） の２つです。これらはJavaScriptと切っても切れない縁にある運命共同体のようなものです。特に１のHTMLはJavaScriptをHTML内に記述するため覚える必要があります。HTMLについて簡単に説明すると<と>で囲まれたものをタグと呼びます。タグには画像を表示するものや改行を示すもの、文字を太くしたり、何かを表すものなどたくさんあります。タグは<タグ名>～</タグ名>�@のように開始タグと終了タグがあります。終了タグは<の後に/を付けます。例えば �@<b>ＡＢＣ</b> �@<タグ名>～</タグ名>になります。 のようになります。タグに囲まれた部分を、さらにタグで囲むこともできます。 <b><i>ＡＢ</i>Ｃ</b> 改行させるタグのように終了タグがないものもあります。 <br> 画像を表示させるタグも終了タグ�Aがありません。 �A<img src="�B123.gif"> �A終了タグがない事に注意します。 �B表示する画像を指定しています。 タグ名以外にsrc="123.gif"�Bと書かれていますが、これはタグの処理方法をより細かく指定するものです。srcは属性と呼ばれ与えられる値は123.gifになります。 図１： キャプション：<と>で囲まれたものがタグ。先頭がタグ名で、場合によって属性と値がある。 図２： キャプション：タグで囲まれた部分がタグの影響を受ける。 本書で使用するタグは以下のものです。 <html>～</html> HTML文書 <head>～</head> 本文に関する情報指定を行う <title>～</title> 文書のタイトル <script>～<script> JavaScriptのプログラムを書く範囲 <body>～</body> 表示される本文 <br> 改行 <img> 画像 <a>～</a> ハイパーリンク <form>～</form> 入力フォーム <input> テキストフィールドやボタンなどフォームの部品 <div>～</div> 段落 <p>～<p> 段落 <b>～</b> 太字にする また、以下の基本パターン�Cを覚えてしまうと便利です。コピー＆ペーストして使っても良いでしょう。 �C <html> <head> <title>タイトル</title> </head> <body> 表示される内容を書く </body> </html> �Cこれが最低限の形式です。最低これだけ書けば動く、というだけのものです。本当は、<!DOCTYPE>などもう少し必要なものがあります。JavaScriptだけを動かしたい場合には<script>タグだけでも（ブラウザによりますが）一応動作します。 次にスタイルシートですが文字や画像の見た目（装飾）と位置を指定する場合に使います。スタイルシートの定義の方法は以下のものがあります。 １：タグ内にstyle属性を使って書く ２：<style>タグ内に書く ３：<link>タグで別ファイルのスタイルシートを読み込む 本書では１の方法のみ使います。その他の書き方についてはスタイルシート関係の本やWebページを参考にしてください。 タグ内に直接書く場合には以下のようになります。 <タグ名 style="スタイルプロパティ名:値"> 指定するスタイルプロパティが複数ある場合�Dは;で区切って書きます。 <タグ名 style="�Dスタイルプロパティ名:値;スタイルプロパティ名:値;スタイルプロパティ名:値"> �D;で区切ります。 例えば<img>タグで表示される画像の表示位置を横320ピクセル、縦240ピクセル�Eにするには以下のように書きます。 <img src="sample.jpg" style="�Eleft:320px;top:240px;"> �Eleftとtopという２つのプロパティと値を指定しています。 pxは単位を示しており、ピクセルを表します。pt（ポイント）やmm（ミリメートル）などの単位も指定できます。 本書で使うスタイルプロパティは以下のものです。 position 座標系指定（値はabsoluteのみ使用） left X座標 top Y座標 width 横幅 height 縦幅 visibility 表示状態