定期更新ゲームの作り方(html編)

お待たせしました。

完全にプログラミングがわからない、「htmlってなに?美味しいの?」って人のためのページです。

「html?知ってるよ、美味しいよね」って人は見る必要ないので飛ばしてください。

 

今回からサンプルゲーム作りをほんのり始めます。

最終目的として、1対1でじゃんけんをするゲームを目指しましょう。

 

メモ帳でhtml作成

まず、メモ帳を開きます。

hello world

と書きます。(内容はなんでもいいです)

ファイル名をhelloworld.htmlとして保存します。

ダブルクリックもしくはブラウザへドラッグアンドドロップでメモ帳に書いた文字が表示されるはずです。

これがhtml、ブラウザに表示させるためのファイルです。

 

htmlにタイトルを付ける

先ほどのhello world の文字の前に以下の行を追記します。

<title></title>

これがhtmlタグです。

スラッシュが付いてない方がはじまり、付いている方が終わりを表します。

この二つの間に入れた文字が、このhtmlファイルのタイトルになります。

試しに以下のように入れてみましょう。

<title>new html</title>

この状態で保存しブラウザで開くと、タブのところに表示されている(ブラウザによります)文字がnew htmlになっているはずです。

 

ここまでで日本語を入力していた人もいるかと思います。

その場合文字化けしていたかもしれません。

タイトルの下に以下の行を入れてみましょう。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

とりあえず意味はわからなくていいですが、説明します。

文字はPC上でそのまま認識しているわけではなく、文字コードというもので定義されています。

その際、htmlが思っている文字コードとPCの思っている文字コードが違っている場合文字化けします。

なので上記の一文で、文字コードはUTF-8を使用しますと双方に宣言することで認識のズレがなくなります。

コミュニケーションですね。

仮に自分の環境で文字化けしていなくても、他の人は文字化けしてる可能性が高いので必ず入れます。

 

リンク、テキストボックス、ドロップダウンリスト

そんな感じでまずはhtmlタグを使って宣言画面を作っていきます。

 

新しいファイルを作成します。

名前はmain.htmlにでもしておきましょう。

宣言画面に必要なのは入力用の項目。

内容はID、パスワード、じゃんけんの手の選択、です。

「html タグ 〇〇」

でググって使い方を調べましょう。(丸投げ)

目標はこんな感じです。

ちなみに改行は

<br>

コメントは

<!-- この部分がコメントになる -->

です。

コメントとは、プログラム内に書き込むメモです。

コードの説明を書いたり、要らないけど消したくはないコードをコメントアウトしたりします。

説明は、ググって書いたとことは後で見たら分からなくなるので入れておきましょう。

 

できましたか?

先程の目標として出した部分はこんな感じになっています。

<html>

 <head>
  <title>宣言画面</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>

 ID:<input type="number">
 <br>
 <br>

 Pass:<input type="password">
 <br>
 <br>

 次に出す手<br>
 <select>
  <option value="rock">グー</option>
  <option value="scissors">チョキ</option>
  <option value="paper">パー</option>
 </select>

</html>

<input>でテキストボックス

<select>でドロップダウンリスト

<option>でドロップダウンリストの内容ですね

 

ついでに先行して結果画面へのリンクも作っておきます。

リンク先は result.html にしておきましょう。

やり方はググってください。

できたものがこちら

コードはこれ

<a href="result.html">更新結果へ</a>

はい、見た目が完成しました。

 

名前をつける

IDなどの入力フォームを他のところでも使うために、名前をつけてあげます。

タグの中に name=”ここが名前” を入れるだけです。

今回は指定の名前をつけてみましょう。

ID:<input type="number">
↓
ID:<input type="number" name="id">
Pass:<input type="password">
↓
Pass:<input type="password" name="pass">
<select>
↓
<select id="hand" name="hand">

 

送信

ここからここまでのフォームの内容を送りますと宣言する必要があります。

また、どのページに送るかも宣言します。

今回はこのmain.htmlに送ります。

コードはこんな感じ。

<form action="main.html" method="POST" name="form">

 <!-- ここに送信したい内容 -->

</form>

formタグで送信したい内容、今回はID、パスワード、次に出す手を挟みます。

methodはPOSTとGETがあり、GETは送信する情報をURL上に出し、POSTは出しません。

とりあえず最初は無視していいです。

 

最後に、</form>の前に送信ボタンを追加します。

<input type="submit" value="送信">

まだクリックしてもmain.htmlに移動するだけで何も起きません。

これでhtmlの準備は完了です。

できたものはこちら

<html>

 <head>
  <title>宣言画面</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>

 <form action="main.html" method="POST" name="form">
  <a href="result.html">更新結果へ</a>
  <br>
  <br>
 
  ID:<input type="number" name="id">
  <br>
  <br>

  Pass:<input type="password" name="pass">
  <br>
  <br>

  次に出す手<br>
  <select id="hand" name="hand">
   <option value="rock">グー</option>
   <option value="scissors">チョキ</option>
   <option value="paper">パー</option>
  </select>
  <br>
  <br>

  <input type="submit" value="送信">
  <br>
  <br>
 </form>

</html>

 

テキストエディタ

今回はとりあえずメモ帳を使いましたが、本当はプログラミング用のテキストエディタを使うのがいいです。

自動で色分けや段落分けをしてくれて見やすかったり、途中まで打つと候補を出してくれたりします。

続きをやるにあたりメモ帳で続けるのはちょっと無謀なので適当なものを用意しておくとよいです。

ちなみに私はAtomとかいうソフトを使ってます。

 

では、せっかくここまで出来たのでインターネット上に公開してみましょう。

レンタルサーバー編へ

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です