トップ ゲームサイト作成入門 朝からＨＴＭＬクッキング♪

　朝からＨＴＭＬクッキング♪

　Chap.0 作業スペースを作ろう

サイトを作ると画像やらhtmlファイルやらでごちゃごちゃしてきますので、 先に作業用のフォルダを用意しておくと便利です。 マイドキュメントなどの適当な場所で適当な名前のフォルダを作成しましょう。 今後サイト関係のファイルは全てここに保存するようにします。

次にそのフォルダの中に『public_html』というフォルダを作成します。 別に名前は何でもいいのですが、この名前にしておくと、 環境によってはこのフォルダを丸ごとサーバ(※)にアップロード(※)できて何かと便利になります。

public_html内は、そのままサーバにアップロードすることになりますので、 原則日本語の名前は使えません。 画像ファイル用にimageフォルダ、ゲーム用にgameフォルダという具合に半角英数字の名前を付けてください。 以上の構造をまとめると以下のようになります。 ちなみにフォルダのことをディレクトリという場合もありますので、 心の片隅にでも置いていただければと思います。

  • マイドキュメント
    • 別のフォルダ１
    • 別のフォルダ２
    • サイト用フォルダ
      • public_html
        • image
        • game

※サーバ･･･
　閲覧者がアクセスするコンピュータのことです。
　『ＨＰスペース』と読んだ方がわかりやすいでしょうか。
　ここにファイルを置くことによって、誰もがサイトを見ることができるわけです。

※アップロード･･･
　サーバにファイルを置くです。
　逆にサーバからファイルを取り寄せることをダウンロードといいます。
　こちらの用語はお馴染みですよね。

　Chap.1 骨がなければ立てません

まずは必要最低限の骨組みを用意します。 ↓こいつを適当なエディタにコピペしてください。 適当なエディタを持っていない方は、 『スタート→すべてのプログラム→アクセサリ→メモ帳』でもＯＫです。 

<html>
<head><title>タイトル</title></head>
<body>
中身
</body>
</html>

メモ帳に書いたらpublic_html内に『index.html』という名前で保存します。 この時ファイルの種類を『すべてのファイル』にすることを忘れないでください。 保存したら、マイドキュメントを開いて、public_htmlフォルダへ移動･･･ 今作成したindex.htmlファイルをダブルクリックしてみましょう。 これで「中身」とだけ書かれたホームページが表示されれば成功です。

中身を簡単に説明します。 HTMLの決まりごととして、原則タグ(※)は始まりと終わりでワンセットです。 <html>で始まったら、必ず</html>で終わらなければなりません。 上の骨組みを見ると、ちゃんとそのルールに則っていることがわかりますね。

タグには親子関係があります。 外にあるのが親で、中に入っているのが子供です。 上記骨組みの場合、<html>がお母さんで、 <head>や<body>は<html>の中に入っているので子供ということになります。 また、<head>の中には更に<title>という子供がいまして、 これは<html>の孫か･･･ということになりますね。

親子関係を強調して上記の骨組みを書くと次のようになります。 htmlでは改行やタブは無視されますので、どんな書き方をしても動作は一緒です。 

<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		中身
	</body>
</html>

上記のものは必要最低限の骨組みです。 どんなサイトでも上記のタグは持っていると思って間違いないです。 HTMLなので<html>タグで始まり、 <head>つまり頭の部分にタイトルやら何やら、 サイトに関する情報を書くことになっています。 実際に画面に表示されるのが<body>つまり、体の部分となるわけですね。 今回は<body>に『中身』とだけ書いたので、中身という表示が現れたというわけです。

※タグ･･･
　<タグ>←こんなのです

　Chap.2 オシャレに気を使うお年頃...

ただ黒い文字が出るだけだと味気ないので、 今回は色やら大きさを変える方法を学びたいと思います。 紙に色を塗るのにも、色鉛筆やらスプレーやら、カレーをこぼすやらありますが、 htmlにも色を指定する手段がいくつもあります。 一番お手軽な方法はタグの属性として指定するやり方ですが、 これには毎回色を指定しなければならないという大きな欠点があります。 

<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		<font color="red">中身</font>
		<font color="blue">です</font>
	</body>
</html>

さて、上のように書き換えるとどのように表示されるでしょうか？　 赤字で「中身」青字で「です」と表示されれば成功です。 ソース(※)上では改行がされていますが、 HTMLでは改行は無視されるので、結果画面で改行はされませんね。 

<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		<font color="red">中身</font><br>
		<font color="blue">です</font>
	</body>
</html>

改行したい場合には、上記のように<br>タグを挿入します。 ちなみにこのタグは、これまで出てきたタグとは違って親にはなれません。 改行の中に何かが入るなんてことはないですからね･･･ そういうタグの場合閉じタグ(</br>)は必要ありません。 前に原則と書いたのは、こういう例外があるからなんですね。

親になれないタグとしては他に↓こんな横棒を追加する


<hr>なんてものもあります。 慣れてくれば親になれそうにないタグは感覚でわかるようになります。

ちなみにHTMLファイルに変更を加えたときは、 そのファイルを開いているブラウザの更新ボタンを押すことで変更を反映させることができます。 試しに上記ソースの色情報『red』を『green』とか『orange』に書き換えて保存→更新 してみてください。 

<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		<font color="red" size="7">中身</font><br>
		<font color="blue">です</font>
	</body>
</html>

属性の基本は<タグ名 属性名="値">です。 タグ名と属性名の間は半角スペースを入れてください。全角では駄目です。 上記の場合『color』という属性に『red』を指定しているので文字が赤くなり、 『size』という属性に『7』を指定しているので、文字サイズが7(大きめ)で表示されています。 それぞれのタグにどんな属性を指定できるかは、『タグ辞典』を見て調べたり、 タグ補完機能付きのHTMLエディタを使って補完するのが一般的ですので、 １つ１つ覚える必要はありません。

ちなみに次のように書いたらどうなるでしょうか？ 後ろの<font>タグが前のタグのお子様になっています。 文字色はredでもあり･･･blueでもある･･･ さて、どちらの色になるでしょう？ 

<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		<font color="red" size="7">中身<br>
			<font color="blue">です</font>
		</font>
	</body>
</html>

この場合、子供の値が優先されます。なので"です"の文字色は青です。 親がredの服を着ろっていうんだけど･･･勝手にでblueを着ちゃうわけですね。 重複していない属性『size』に関しては、 特に反論せずにちゃんとしたがっていることがおわかりいただけると思います。 つまり、原則親の属性をそのまま受け継ぐわけですが、 自分なりの属性を持っていた場合にはそちらが優先されるという感じです。

上でも書きましたが、<font>タグの欠点は、 毎回色やらサイズを指定しなければならない点です。 上記の例ならまだタグ２つなのでいいですが、 ページ数が１０や２０になってくると、 デザインを変える度に１つ１つ変更していかなければならないのはかなり骨が折れますよね。

そこで登場するのがスタイルシートというものです。 これを用いると、タグに関する情報を一括で管理することができます。 百聞は一見にしかず。とりあえずやってみましょう。 index.htmlの内容を次のように書き換えてください。 丸ごとコピペでも大丈夫です。 

<html>
	<head>
		<title>タイトル</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<font>中身</font>
	</body>
</html>

タイトルの下に１行追加されました。 これは"スタイルシートを使いますよ〜"という宣言みたいなものです。 書き換える必要があるのは『href』属性だけで、あとは常に変わりません。 『href』属性に指定する値は、スタイル情報を記述したファイルへのパスです。 同じフォルダにある場合にはファイル名だけでかまいません。 今回は『style.css』というファイルを使うということになります。

今回は<font>タグを属性を指定しないで用いています。 スタイルシートで一括指定できるので、タグには何も書く必要がないわけです。 それではスタイル情報を記述したファイルを作成してみましょう。 ↓こいつを新しいファイルにコピペしてください。 

font{
	color:#ff0000;
}

書き込んだらindex.htmlと同じ場所に『style.css』という名前で保存してください。 そしてブラウザでindex.htmlを開くと･･･あら不思議。 属性で何も指定していないのに文字が赤くなりましたね。 

font{
	color:#ff0000;
	font-size:15pt;
}

今度はサイズに関する指定を追加しましたので、 文字サイズが15ptで表示されるはずです。 タグの属性を用いた場合との大きな違いは、 htmlファイルの中身を直接いじらないということですね。 htmlファイルが１００個あろうと２００個あろうと、 ここの記述を書き加えるだけで模様替えが済んでしまいます。 どんな内容を指定できるかについては、 スタイルシートの本を買っていただくか、Webで調べながらやるか、 もしくは補完機能の付いたHTMLエディタを用いればいいので、 特に暗記する必要はありません。 

font{
    color:#ff0000;
    font-size:15pt;
    cursor:crosshair;
}

スタイルシートの方が機能が豊富なので、 タグの属性だけではとても表現できないような柔軟なデザインを行うことができます。 上記の例は、文字の上にマウスカーソルを持ってくると、 カーソルの形が"クロス"に変わるというものです。 『中身』と記述された部分にマウスカーソルを持っていくと･･･見慣れないカーソルが現れましたね。 これはタグでは絶対にできません。

場合によっては同じタグでも違うデザインにしたいという場合もあるでしょう。 そんなときにはクラスもしくはＩＤというものを用います。 

<html>
	<head>
		<title>タイトル</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<font class="kind">中身</font><br>
		<font class="crea">です</font><br>
		<font id="sophia">よね</font>

	</body>
</html>

次にスタイルシートの方にもクラスやIDの記述を追加します。 

font.kind{
    color:#ff0000;
    font-size:15pt;
}
font.crea{
    color:#00ff00;
    font-size:5pt;
}
font#sophia{
    color:#0000ff;
    font-size:10pt;
}

スタイルシートの方には『タグ名.クラス名』もしくは、 『タグ名#ID』と記述することによって、 タグとクラス名やIDを用いた指定を行うことが可能です。 上記の例ですと、<font>タグの中のkindクラスに該当するものは、 文字が赤でサイズが15pt、creaクラスに該当するものは、 文字が緑でサイズが5pt、sophiaIDに該当するものは、 文字が青でサイズが10ptという指定をしています。

クラスとIDの違いは、クラスが同じHTML内で複数呼び出せるのに対して、 IDは１回しか呼び出すことができない決まりになっていることです。 学校のクラスとID(学籍番号)みたいなものですね。 クラスの中には何人もの生徒がいますが、IDは１人１人別でなければならないというわけですね。 まぁ、現存のブラウザでは特に区別をしていないみたいですけど...(^^;) ルールはルールなのでちゃんと守った方がいいですね。 

.kind{
    color:#ff0000;
    font-size:15pt;
}

ちなみに上記のような指定方法もあります。 この場合、タグに関わらずクラスkindを持つものは全てこのスタイルが適用されます。 <body>タグや<i>タグ(後述)にもクラスkindを指定できるというわけですね。 

適応対象{
    設定するスタイル;
}

スタイルの記述方法を簡単に説明します。 まず『タグ名.クラス名』『.クラス名』のようなスタイルを適応する範囲を記述します。 次に設定するスタイルの情報を中かっこ{}の中に記述します。 スタイルは１項目ごとにセミコロン;を記述しなければなりません。 スタイルを設定したにもかかわらず反映されない場合には、 範囲の指定が間違っているか、どこかでセミコロンが抜けている場合が多いです。

こちらもHTML同様にタブや改行は無視されますので、 次のような書き方をしても問題ありません。 

適応対象{設定するスタイル;}
※ソース･･･
　HTMLファイルの中身のことを言います。

　Chap.3 まだまだオシャレしたいお年頃

色やサイズが決まったところで、次は配置についてお勉強したいと思います。 配置はスタイルシートを用いれば、左上から縦100, 横500の位置にこの文字を表示させる なんてこともばっちりできますが、 画面サイズやら解像度やらの環境によって見え方が違ってくるので、 一般的にそういうことはあまりしません(^^;) 私が好むのは、テーブルタグを用いて骨組みをして、 そこにコンテンツを流し込んでいく方法なので、今回はそれの方法を説明します。 

<html>
	<head>
		<title>タイトル</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<table border="3" align="center">
			<tr>
				<td>表</td><td>です</td>
			</tr>
		</table>
	</body>
</html>

上のソースをindex.htmlにコピペすると、 画面の上中央に変なものが表示されます。 これがテーブル(表)と呼ばれるやつですね。 属性のborder="3"というのは、『線の太さ』を表しています。 属性のalign="center"というのは、画面の中央に表示するという指定です。 border="5"とかalign="right"とか色々変えて遊んでみてください。

<tr>タグは表の１行を表すタグです。 その中にお子様として列を表す<td>タグが２つ入っているので、 １行２列の表が作成されたというわけでした。 ちなみに３＊３の表を作りたいときはこうなります↓ 

<html>
	<head>
		<title>タイトル</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<table border="3" align="center">
			<tr>
				<td>1-1</td><td>1-2</td><td>1-3</td>
			</tr>
			<tr>
				<td>2-1</td><td>2-2</td><td>2-3</td>
			</tr>
			<tr>
				<td>3-1</td><td>3-2</td><td>3-3</td>
			</tr>
		</table>
	</body>
</html>

このままだと文字の長さによってレイアウトが変わってしまうので、 テーブルの大きさを指定してしまいましょう。 また、デフォルトの線があるのは見た目的にあれなので、 スタイルシートで新しい線を描くことにしましょう。 

<html>
	<head>
		<title>タイトル</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<table align="center" class="line" width="700">
			<tr>
				<td>1-1</td><td>1-2</td>
			</tr>
		</table>
	</body>
</html>

スタイルシートにlineクラスを作成しましょう。 kind,crea,sophiaクラスはもう使わないので消してしまってください(^^;) 

.line{
	border-style:dotted;
	border-color:#ff0000;
}

赤いドットの線が引かれましたか？　 border-styleは線の種類を表していまして、 他にも『solid』『double』『groove』『ridge』『inset』『outset』『dashed』などがあります。 それぞれどんな線なのかはご自身の目で確かめてみてください。 border-colorは文字通り線の色を指定しているわけですね。 ちなみに上下左右のどこに線を引くかという指定もできます。 

.line{
	border-style:dotted;
	border-color:#ff0000;
	border-width:5pt 5pt 0pt 0pt;
}

上と右にだけ線が表示されましたね。 border-widthで線の太さを0ptにすると線は表示されないのです。 ちなみに左から『上 右 下 左』で太さを指定します。

それっぽく見せる為に、サイトのタイトルでも書いてみましょうか。 横幅の関係で途中改行していますが、あまり気にしないでください。 <h1>は見出し(タイトル)を表すタグで、 デフォルトでは物凄くでっかい字が表示されます。 

<html>
	<head>
		<title>それっぽくテストページ</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<table align="center" class="line" width="700">
			<tr>
				<td>
					<h1 class="title">
						それっぽくテストページ</h1>
				</td>
			</tr>
		</table>
	</body>
</html>

スタイルも指定します。 text-align:rightで文字を右寄せして、 背景を#999999(灰色)、文字色を#ffffff(白)にしています。 ちなみにこの文字色の指定方法のルールは次のようになっています。

光の三原色であるＲＧＢ(赤[Red]、緑[Green]、青[Blue])の混ぜ具合を表しています。 #000000 シャープ記号のあとの数字が２つセットで、それぞれ赤と緑と青を表しています。 数字は１６進数(0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f)なので、 0が最も小さくfが最も大きい値になるわけです。

なので#ff0000 とすると真っ赤に、 #0000ff とすると真っ青になりますし、 #666666 という具合に混ぜると灰色になります。 光の三原色なので、全て混ぜる(#ffffff )と白←見えませんが...に、 何もない(#000000 )と黒になります。

ちなみにWebセーフカラーと呼ばれる、 環境に捕らわれず同じ色が表示される色を用いた方が安全です。 #003366とか#ccffccのように、３の倍数もしくは０の組合せだけで表現できる値がWebセーフカラーです。 ↑慣れるまでは一覧表のようなものを見ながらの方が良いですね(^^;) 

.line{
	border-style:dotted;
	border-color:#ff0000;
}
.title{
	text-align:right;
	font-size:10pt;
	background-color:#999999;
	color:#ffffff;
}

本文と画像も入れてみましょう。 適当な画像がない方はこれでも使ってください。 <img>タグはsrc属性で指定した画像を表示します。 同じフォルダに画像が置いてある場合にはファイル名のみを、 最初に作成したimageフォルダに置いた場合には、『image/ファイル名』を指定します。 通常、画像は１行を丸々占拠して表示されるのですが、 align属性でleftを指定することによって、画像の右側にテキストを表示させることができます。

<p>タグは段落を表します。 ダラダラ〜っとした文字を放り込むときはこのタグを用いましょう。 

<html>
	<head>
		<title>それっぽくテストページ</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<table align="center" class="line" width="700">
			<tr>
				<td>
					<h1 class="title">
						それっぽくテストページ</h1>
						
					<img src="yuhi.jpg" align="left">
					
					<p>
					これはテスト用のページです。
					内容なんか何にもありませんし、
					デザインなんか超適当。
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

１ページだけでは味気ないので、他のページへのリンクを貼ってみることにします。 ただし、まだ他のページは作成していないので、リンクをクリックしてもエラーが出ます。 

<html>
	<head>
		<title>それっぽくテストページ</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<table align="center" class="line" width="700">
			<tr>
				<td>
					<h1 class="title">
						それっぽくテストページ</h1>
						
					<img src="yuhi.jpg" align="left">
					
					<p>
					これはテスト用のページです。
					内容なんか何にもありませんし、
					デザインなんか超適当。
					</p>
					
					□<a href="hajimete.html">
					初めての方へ</a>
				</td>
			</tr>
		</table>
	</body>
</html>

次のソースをhajimete.htmlという名前で、index.htmlと同じ場所に保存すれば、 "ページが見つかりません"のエラーは出なくなります。 

<html>
	<head>
		<title>初めての方へ</title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<table align="center" class="line" width="700">
			<tr>
				<td>
					<h1 class="title">
						初めての方へ</h1>
						
					<p>
					ご訪問ありがとうございます。
					このページはテスト用です。
					何もありません。
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

この要領でページをどんどん増やしていくわけですね。 ちなみにリンク先のページを別のウィンドウで表示させる為には、 <a>タグにtarget="_blank"という属性を指定します。

　Chap.4 おまけのおまけ

とりあえずこれで一通りの工程は学び終えましたので、 後は各自のアイディアと学習(ひぃ)で素敵なページが作れることと思います。

ある程度ページが出来上がってきたら、 いよいよ全世界に向けての情報発信です。 具体的にはホームページスペースを確保して、そこにアップロードするという作業になります。 スペースには有料のものと無料のものがあります。 大きな違いは、広告の有無、ファイル容量、速度が挙げられますが、 まぁ、とりあえず最初は無料のスペースで十分でしょう。 １年、２年と続いて、今後もずっと続けていけるようだったら有料のものに変えればいいのです。 アップロードの手順については、各サービスによって異なりますので、 ここでの説明は割愛させていただきます。
Webで調べながら作れば大概のものは作れると思いますが、 やはり手元に１冊本を置いておいた方が効率が良いですし、学習も早いと思います。 なので、最後にWeb制作関連でオススメの本を２冊紹介しておきます。

ホームページ辞典 (株)アンク著 翔泳社
Web制作テクニック１３３の鉄則 大田　公士著 すばる舎


トップ ゲームサイト作成入門 朝からＨＴＭＬクッキング♪
当サイトについて お問い合わせ
(C)2001-2010 つくりえいと All rights reserved.