ＳＴＥＰ１では、ゲームの骨組みになる基本的な画面を作りますにゃ。ＪａｖａＳｃｒｉｐｔはまだ使いませんにゃ。できあがるものはこれですにゃ。
ＨＴＭＬを書き始める前に、まずは、神経衰弱ゲームで使う１１枚のＧＩＦ画像を用意しますにゃ。あなたがご自分で作ってもいいんですけど、それがめんどくさいって思う人は、わたしが作った画像をそのまま使ってくださいにゃ。
これが、その画像ですにゃ。
全部で１８枚あるんですけど、実際に使うのは１１枚で、上段の９枚と下段の左から２枚目まであれば、神経衰弱を作ることができますにゃ。あとの７枚は、画像を変えたい人のために用意した予備の画像ですにゃ。
・上段左端 カードがにゃい（取られた）時のための画像で、にゃにもにゃいように見えてもちゃんと絵がありますにゃ。
・上段２枚目〜９枚目 カードの表に描かれる数字ですにゃ。
・下段左端 特殊なルールを採用する時に使う「くるくるカード」ですにゃ。
・下段左から２枚目 カードの裏、つまり、カードがめくられる前の画像ですにゃ。
ここまでの画像があれば、神経衰弱は作れますにゃ。あとは、予備の画像ですにゃ。
・下段３枚目〜６枚目 カードの裏の画像の予備ですにゃ。お好きなものがあれば、２枚目の画像の代わりに使ってくださいにゃ。
・下段７枚目 トランプの「１」は「１」じゃにゃくて「Ａ」だと思う人は、「１」の画像の代わりに使ってくださいにゃ。
・下段８枚目〜９枚目 「くるくるカード」の予備ですにゃ。お好きなものがあれば、代わりに使ってくださいにゃ。
この画像をそのまま使う時は、画像の上で「マウスを右クリック」→「名前を付けて画像を保存を選択」→ＨＴＭＬファイルとおなじフォルダの中に保存してくださいにゃ。ＨＴＭＬファイルは、このあと作りますにゃ。ファイル名は、基本的にはそのまま使えばいいんですけど、画像を差し替える場合は数字を変更してくださいにゃ。例えば「１」の画像の代わりに「Ａ」を使う場合は、「card-15.gif」を「card-1.gif」として保存してくださいにゃ。くるくるカードやカードの裏の画像を変更する時もおなじですにゃ。難しそうに聞こえるかもしれませんけど、最終的に「card-0.gif」〜「card-10.gif」の１１枚があれば問題ありませんにゃ。ご自分で画像を作る場合など、環境や条件によっては、画像ファイルの拡張子（最後の３文字）が大文字の「GIF」になることがありますにゃ。その場合は、プログラムの都合上小文字の「gif」に統一してくださいにゃ。
おなじ画像をあと２パターン用意しましたにゃ。
色が違うだけで、雰囲気ががらっと変わることもありますにゃ。ゲーム画面の背景色は、好きな色に変えられますにゃ。トランプや麻雀などで遊ぶ時、テーブルの色は濃い緑色のほうがいいって思う人は、これを使ってくださいにゃ。ただし、各画像のファイル名の数字のあとに付いている「a」は消してくださいにゃ。
これは、ふちの部分（左上は画像全体）を透過処理した画像ですにゃ。これを使えば、ゲーム画面の背景色をどんな色にしても大丈夫ですにゃ。使う時は、各画像のファイル名の数字のあとに付いている「b」を消してくださいにゃ。
１１枚の画像をフォルダに入れたら、次に、ＨＴＭＬの骨組みを作りますにゃ。難しそうに聞こえるかもしれにゃいんですけど、そんなことはありませんにゃ。下の青い文字をコピーして、ＴｅｒａＰａｄなどエディタにそのまま貼り付けるだけですにゃ。
<html>
<head>
<title>神経衰弱♪</title>
</head>
<body bgcolor="A0FFA0">
<table border=1>
<tr>
<td colspan=2 bgcolor="FFC0C0">
<font size=6 color="0000FF">神経衰弱♪</font>
</td>
</tr>
<tr>
<td bgcolor="00FFFF" align=center valign=top>
※ここにカードを表示しますにゃ
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><img src="./card-0.gif"></td>
<td><img src="./card-1.gif"></td>
<td><img src="./card-2.gif"></td>
<td><img src="./card-3.gif"></td>
<td><img src="./card-4.gif"></td>
<td><img src="./card-5.gif"></td>
</tr>
<tr>
<td><img src="./card-6.gif"></td>
<td><img src="./card-7.gif"></td>
<td><img src="./card-8.gif"></td>
<td><img src="./card-9.gif"></td>
<td><img src="./card-10.gif"></td>
<td><img src="./card-0.gif"></td>
</tr>
</table>
</td>
<td bgcolor="FFFFA0" valign=top>
※ここには、いろんな情報を表示しますにゃ
</td>
</tr>
<tr>
<td colspan=2 bgcolor="C0C0C0">
※ここは、本当は必要にゃいんですけど、作ってる途中で<br>いろいろ表示する場所ですにゃ
</td>
</tr>
</table><br>
<font size=4>
あなたの名前
<a href="http://bigchan.sakura.ne.jp/index.html">ホームページ</a>
</font>
</body>
</html>
ＳＴＥＰ２以降もこんな感じで書いていきますにゃ。ただし、次からは「最初からある部分は黒い文字」「新しく追加する部分は青い文字」「書いてあったことを修正する部分は赤い文字」「書いてあったことを削除する部分は灰色の文字」で書くことにしますにゃ。
ＨＴＭＬがよくわかんにゃい人のために、簡単に解説しますにゃ。わかってる人は読み飛ばしてくださいにゃ。
・最初と最後の「<html>」「</html>」
こんな感じで「<」と「>」で囲まれたものをタグまたはＨＴＭＬタグといいますにゃ。「/」が付くと、そのタグの終わりっていう意味ですにゃ。これは、「ＨＴＭＬの始まりと終わり」っていう意味で、「この２つで囲まれた部分がＨＴＭＬです」っていうことですにゃ。
・「<head>」「</head>」
この２つで囲まれた部分が「ＨＴＭＬのhead（頭）」っていう意味にゃんですけど、普通にＨＴＭＬを書く時は、あとで出てくる「body」と区別する必要はにゃいですにゃ。ただし、ＪａｖａＳｃｔｒｉｐｔを使う時は、スクリプト（プログラム）をheadの中に書くことが多いですにゃ。ＳＴＥＰ２以降はそういう感じで進めていきますにゃ。
・「<title>」「</title>」
この２つで囲まれている文字がサイトの名前になりますにゃ。今回は神経衰弱を作るから、仮に「神経衰弱♪」っていう名前にしたんですけど、お好きな名前に変更してくださいにゃ。必要にゃいと思ったら省略することもできますにゃ。
・「<body bgcolor="A0FFA0">」「</body>」
この２つで囲まれている部分が「ＨＴＭＬのbody（体・胴体）」っていう意味で、この講座ではＪａｖａＳｃｒｉｐｔ以外の表示内容を書くのに使いますにゃ。「bgcolor="A0FFA0"」は、サイトの背景色を薄い緑色にするっていう意味ですにゃ。「"（正式名はダブルクォートまたはダブルクォーテーション）」で囲まれた部分には、６文字の数字とアルファベットの組み合わせが入って、左の２文字、真ん中の２文字、右の２文字がそれぞれ「赤、緑、青の強さ」を１６進数で表していますにゃ。その色が全く含まれにゃい時は「00」、その色を１００％含む時は「FF」になるんですけど、そのへんは説明してるときりがにゃいから、ご自身で研究してくださいにゃ。今回は、緑を１００％、赤と青を７５％くらい含む色ってことで、白に近い緑＝薄い緑になりますにゃ。もちろん、好きな色に変更してもかまいませんにゃ
・「<table border=1>」「</table><br>」
「</table>」は２ヶ所あるんですけど、下から７行目のほうですにゃ。この２つで囲まれている部分がテーブルの中身で、「border=1」は「枠線の太さ」ですにゃ。数字が大きくなると枠線が太くなるんですけど、普通は０〜２くらいしか使いませんにゃ。「<br>」は改行っていう意味で、ＨＴＭＬではよく使いますにゃ。２個以上続けて書くと、空行ができますにゃ。この場合は、テーブルのタグを閉じる時に自動的に改行されますから、本当は必要にゃいんですけど、見た目を調整するためにあえて１行あけるようにしていますにゃ。
・「<tr>」「</tr>」
この２つで囲まれた部分が「横一列に並んだ部屋」っていう意味ですにゃ。今のところ５ヶ所くらいあって、上から順番に説明していきますにゃ…って言いたいところにゃんですけど、実はどれもおなじ意味ですにゃ。
・「<td colspan=2 bgcolor="00FFFF">」「</td>」
この２つで囲まれた部分が「ひとつの部屋」っていう意味ですにゃ。後でわかるんですけど、このテーブルの上から２列目は横に２部屋並んだ形で、それはテーブル内のすべての横列に適用されますにゃ。「colspan=2」っていうのは横に並んだ２部屋の壁を取り払って、つながった１部屋として使うっていう意味ですにゃ。３以上の数値を指定することもできますにゃ。「bgcolor="00FFFF"」っていうのは、この部屋の背景色を水色にするっていう意味ですにゃ。bodyの時に出てきたbgcolorとおなじですにゃ。画像を選ぶ時に、ふちが濃い緑色の画像にした人は、この部分を「bgcolor="008000"」に変更してくださいにゃ。「valign=top」っていうのは、この部屋の中身を部屋の上端に寄せて書くっていう意味ですにゃ。
・「※ここにカードを…」
わかりやすいように書いただけで、実際のゲームでは使いませんから、そのうち消しますにゃ。
・「<table border=0 cellspacing=0 cellpadding=0>」「</table>」
さっきとおなじで、この２つで囲まれた中身がテーブルになるんですけど、ここで注目してほしいのはテーブルで作った部屋の中に別のテーブルを入れているってことですにゃ。こんな感じで２重や３重のテーブルを作ることもできますにゃ。「border=0」は、枠線の太さ＝０っていう意味にゃんですけど、「cellspacing=0」「cellpadding=0」と一緒に使うと枠線そのものがなくなりますにゃ。画像をくっつけて表示したい時には、こんな感じにするといいですにゃ。
・「<tr>」「</tr>」
さっきとおなじですから、説明は省略しますにゃ。注目してほしいのは、このあとの「<td>」「</td>」の数ですにゃ。６個ありますから、このテーブルの横一列の部屋の数は６個ですにゃ。
・「<td>」「<img src="./card-0.gif">」「</td>」
部屋の中にcard-0.gifという名前の画像を入れるっていう意味ですにゃ。「./」は、ＨＴＭＬとおなじフォルダの中からファイルを見つけるっていう意味で、こういう書き方を「相対パス」って言うんですけど、それは別に知らにゃくても問題ありませんにゃ。画像ファイルをＨＴＭＬとおなじフォルダの中に保存してくださいって言ったのは、こういう理由ですにゃ。わかる人は、別の場所に保存して、その場所を示すパスを書いてもいいんですけど、話をわかりやすくするために、こういう感じにしましたにゃ。この後、このテーブルを閉じるところまでは、おなじことになりますから説明は省略しますにゃ。
・「<td bgcolor="FFFFA0" valign=top>」「</td>」
最初に作ったテーブルの上から２段目、右側の部屋の中身ですにゃ。この部屋の背景色は薄い黄色ですにゃ。好きな色に変えてもかまいませんにゃ。
・「※ここには…」
わかりやすいように書いただけで、実際のゲームでは使いませんから、そのうち消しますにゃ。
・「<tr>」「<td colspan=2 bgcolor="C0C0C0">」「</td>」「/tr>」
さっきとおなじで、横一列にある２つの部屋をくっつけて使いますにゃ。
・「※ここは、本当は必要にゃい…」
この文字だけじゃにゃくて、実際にはこの部屋そのものが必要ありませんにゃ。でも、この後の説明で配列の中身を見る時に使いますから、今はこのままにしておいてくださいにゃ。
・「<font size=4」「</font>」
この２つで囲まれた部分の文字サイズを４（通常は３）にするっていう意味ですにゃ。数字が大きくなると文字も大きくなりますにゃ。おなじタグの中に「color」を一緒に入れて使うことも多いですにゃ。
・「あなたの名前」
当たり前ですけど、このままだと画面に「あなたの名前」と表示されますにゃ。あなたのお名前に書き換えてくださいにゃ。もちろん、本名ではにゃいハンドルネームやペンネームのようなものでかまいませんにゃ。
・「<a href="〜">」「</a>」
画面には、この２つで囲まれた文字が（特に指定しにゃい場合）青い色で表示されますにゃ。サイトを見る人が、その文字をクリックすると、指定されたＵＲＬに移動しますにゃ。これを「ハイパーリンク」って言うんですけど、別に知らにゃくても問題ありませんにゃ。「"」で囲まれた部分に、あなたのサイトのトップページのＵＲＬを書いておくと、神経衰弱で遊んでくれた人がそっちも見に行ってくれるかもしれませんにゃ。ＵＲＬは、相対パスでも絶対パス（この例みたいに「html」から書く方法）でも構いませんにゃ。このままだと、わたしのサイトに飛んでしまいますから、忘れずに書き換えてくださいにゃ。
ここまでできたら、書いた内容を保存して、レンタルサーバにアップロードしてくださいにゃ。アップロードの方法やＦＦＦＴＰの設定の仕方の説明は、ここでは省略しますにゃ。わからにゃい人は、そういうサイトを見るか、知ってる人に聞いてくださいにゃ。アップロードしたら、あなたご自身が見に行ってくださいにゃ。こんな感じのサイトができていたら成功ですにゃ。文字化けしている場合は、文字コード（ＥＵＣがおすすめ）を指定して、もう１回アップロードしてくださいにゃ。「ページが見つかりません」などの表示が出た時は、アップロードに失敗したか、ＵＲＬを間違えているか、どっちかですにゃ。確認して、必要があればもう１回アップロードしてくださいにゃ。
