【ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング①】
こんにちは、ペンギン男です🐧
Webに多少は馴染んだようなので、一層、手を動かすパターンの本を選びました。ゲームはやらないのですが、SEOの教科書的なものでも、SNSや動画と同等にゲームによるユーザーとのコミュニケーションの重要性が説かれている以上、無視はできませんよね。
ちなみに、自分でも実装してみる予定です。
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング［改訂版］ (Future Coders（NextPublishing）)
- 作者: 田中賢一郎
- 出版社/メーカー: インプレスR&D
- 発売日: 2017/03/24
- メディア: Kindle版
- この商品を含むブログを見る
【目次】
(ページネーションはkindleでの表記に従います)
JavaScriptでは、テキストエディタとブラウザさえあれば大丈夫というが、念のためトライ
No.15－16を編集
<!DOCTYPE html>
<html>
<body>
<h1>タイトル</h1>
<p>これは<b>パラグラフ</b>です</p>
</body>
</html>
（２）「Sample1.htmlカ」で保存
（３）次の通り表示
本当に、うまく行きました。多少なりともHTMLやJavaScriptの経験をされた方なら、当たり前のことでしょうが
- テキストエディタ(windows「メモ帳」)と、
- ブラウザ(Google Chrome)と、
- HTML文
の連携を実感できたことについては、素朴に感動💦また、こういう時にこそ「ブラウザ」が、どのような機能を持っているのか、再認識できますね。
この本では、ソースコードに慣れることが推奨されていますが
No.13
いろいろなページの内容(=ソースコードのこと)を見てみましょう
ちなみにスマホでも、isource browserというアプリで、いろんなサイトのソースコード見られます。念のため。今までPC🖥でしか見られないと思っていたので、改めて共有させて頂く次第です。
過去にたくさんソースコードを見たほうが良いとアドバイス頂いたこともあります。しかしながら、GoogleアナリティクスやGoogleサーチコンソールも同様ですが、いくら有益だと聞いていても、自身が運営するサイトが無かったり、緊急な必要性がなければ、なかなか手が動きませんよね💦
簡単過ぎるソースコードではありましたが、うまく行ったことに気を良くして、ここでは有用なタグ集を網羅
No.19-20
- h1→見出し１
- h2→見出し２
- h3→見出し３
- p→パラグラフ
- div→グループ化
- span→テキストの一部
- ul→箇条書き
- ol→番号付きリスト
- li→リストの項目
- img→画像
- br→改行
- button→ボタン
- input→インプット
- a→文書間のリンクを記述
- table→テーブル
- tr→テーブルの行
- td→テーブルのセル
「div」は、よく使います。目次を囲む時などです。また、「button」や「input」というのは完全に初見。たしかに、ゲームやネットショップには、不可欠そうなコードです。
本書のNo.19以降にサンプルコードあるので、少し加工し、上記の青字のタグを入れ込んで試してみます
＜ソースコード＞
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td></td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
</tr>
<tr>
<td>午前</td>
<td>理</td>
<td>国</td>
<td>算</td>
<td>英</td>
<td>社</td>
</tr>
<tr>
<td>午後</td>
<td>英</td>
<td>国</td>
<td>理</td>
<td>算</td>
<td>社</td>
</tr>
</table>
<button>OKボタン</button>
<button>NGボタン</button>
</body>
<html>
＜表示＞
誰にでも出来るように設計してあるのは分かっていても、それなりにスムーズに進んだことに、やっぱり、ホッ😌
ちなみに、ボタンは作ったものの、何にも連携していないので、本来ならもっと作り込まないとダメなんでしょうね。徐々に学習予定です。
#ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング
