1-1 HTMLとCSSの基礎知識

JavaScriptのプログラムを作るには、HTMLについての基本的な知識が必要です。 HTMLは易しい言語であり、本講座で必要な知識を解説致しますので、HTMLについて詳しくない方もご安心下さい。またCSSの概要も合わせて説明して参ります。例えば全てのブラウザで表示範囲いっぱいにゲーム画面を描画するという指定をCSS+JavaScriptで行います。

(1)HTMLとは

HTMLはハイパーテキストマークアップランゲージ(HyperText Markup Language)の略で、ホームページを定義する言語です。 HTMLは要素と呼ばれるソースコードで構成されています。

<要素名>文字列</要素名>

【例１】

<h1>見出しを表示する</h1>

このように記述されている箇所では

見出しを表示する

と表示されます。
最初の<h1>を開始タグ、終りの</h1>を終了タグといい、開始タグから終了タグまでが一つの要素となります。
要素には、画像や表を表示したり、指定したURLにジャンプするなど、様々な種類があります。
要素の多くは開始タグ～終了タグで記述しますが、次の画像を表示する要素のように開始タグのみで記述するものもあります。

【例２】

imgタグはsrc属性で指定した画像を表示します。

↑これは <img src="../img/banner02s_b.png"> と記述しており、タグにはこのように属性を記述できるものがあります。例えば要素をクリック（タップ）した時にJavaScriptを実行するにはonclick属性を用います。
※階層の指定は 1-2 (2) の補足で説明します
※onclick属性は 1-5 (2) で説明します

HTML5はブラウザ上にグラフィック表示を行えるキャンバス要素を配置できます。キャンバスは <canvas> というタグで記述します。キャンバスは 1-7 と 1-8 で解説します。その他にも本講座を進めながら必要な要素を説明していきます。

(2)CSSとは

CSSはカスケーディング・スタイル・シートの略で、ホームページの体裁（文字の大きさや色、枠線の太さやバックの色など）を担当するものです。一昔前のホームページは、装飾箇所を逐一HTMLのコードに記述していましたが、その方法ではソースコードが判りにくくなる欠点がありました。現在はHTMLでホームページの基本的な構造を記述し、CSSで装飾を定義するようになっています。そしてこのホームページの構造と装飾を切り分ける仕組みは、スマートフォンの普及によりＷＥＢデザインの世界で必須なものとなりました。ホームページをパソコンとスマホの両方に対応させるにはCSSの知識（技術）が不可欠となります。と申しましても、個人レベルのHTML5+JavaScriptのゲーム制作では、本講座で説明する最低限のCSSの知識があれば大丈夫です。 CSSはHTML内に記述する方法と、ファイル名.cssという別ファイルで定義する方法があり、本講座では最低限必要なCSSだけをHTMLに直接記述する方法をとります。

(3)プログラミング言語について

メジャーなプログラミング言語にCとC++、Javaがあります。JavaとJavaScriptは別の言語です。
プログラミング言語の多くは基本的な記述の仕方や各種の命令が似ていますので、JavaScriptを理解することはC系言語やJavaの習得にも役立ちます。
C系言語やJavaで書かれたソースコードを動かすにはコンパイルして実行形式のファイルに変換する必要があります。コンパイルとはソースコードをコンピューターが直接実行できる機械語や、環境に依存しないでプログラムが動く中間コードに変換することをいいます。 JavaScriptはコンパイルせずにブラウザ上で動くところがC系言語やJavaと大きく違う点です。

本講座ではC系言語やJavaと統一した記述を行うようにします
JavaScriptは新しくできたプログラミング言語であり、変数名、比較処理、各種の命令の使い方などで他の言語より柔軟に記述できる部分があります。それらを理解した上でJavaScript特有の書き方をするのであれば問題ございませんが、初めてプログラミングを勉強される方がJavaScriptのみで通用するルールでソースコードを書くことは、将来他のプログラミング言語を学ぶ際にあまり良いとは思えません。そこで本講座では、メジャーなプログラミング言語と、できるだけ統一した記述を行うようにしました。ちなみにJavaも新しい言語ですが、C/C++言語を引き継いで開発されたJavaの記述ルールはC系言語に近いものになっています。

次のページへ