ペンギン男の生活@ボディケアも。Web系ビジネススキルも。

ボディケア方面では、ヨガ・ストレッチを中心に、Web系ビジネス方面では、SEO・事業計画を中心にナレッジを積み上げていくブログ。

【ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング①】

こんにちは、ペンギン男です🐧

Webに多少は馴染んだようなので、一層、手を動かすパターンの本を選びました。ゲームはやらないのですが、SEOの教科書的なものでも、SNSや動画と同等にゲームによるユーザーとのコミュニケーションの重要性が説かれている以上、無視はできませんよね。 

ちなみに、自分でも実装してみる予定です。

 

(ページネーションはkindleでの表記に従います)

JavaScriptでは、テキストエディタとブラウザさえあれば大丈夫というが、念のためトライ

No.15-16を編集

(1)次のソースコードを、windowsの「メモ帳」に入力

   <!DOCTYPE html>

           <html>

           <body>

           <h1>タイトル</h1>

           <p>これは<b>パラグラフ</b>です</p>

           </body>

           </html>

(2)「Sample1.htmlカ」で保存

(3)次の通り表示

f:id:penguinotokonoseikatsu:20190515025353p:plain

本当に、うまく行きました。多少なりともHTMLやJavaScriptの経験をされた方なら、当たり前のことでしょうが 

の連携を実感できたことについては、素朴に感動💦また、こういう時にこそ「ブラウザ」が、どのような機能を持っているのか、再認識できますね。

この本では、ソースコードに慣れることが推奨されていますが

No.13

いろいろなページの内容(=ソースコードのこと)を見てみましょう

ちなみにスマホでも、isource browserというアプリで、いろんなサイトのソースコード見られます。念のため。今までPC🖥でしか見られないと思っていたので、改めて共有させて頂く次第です。

過去にたくさんソースコードを見たほうが良いとアドバイス頂いたこともあります。しかしながら、GoogleアナリティクスやGoogleサーチコンソールも同様ですが、いくら有益だと聞いていても、自身が運営するサイトが無かったり、緊急な必要性がなければ、なかなか手が動きませんよね💦

 

簡単過ぎるソースコードではありましたが、うまく行ったことに気を良くして、ここでは有用なタグ集を網羅

No.19-20

  •     h1→見出し1
  •     h2→見出し2
  •     h3→見出し3
  •     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>

<表示>

f:id:penguinotokonoseikatsu:20190515025351p:plain

誰にでも出来るように設計してあるのは分かっていても、それなりにスムーズに進んだことに、やっぱり、ホッ😌

ちなみに、ボタンは作ったものの、何にも連携していないので、本来ならもっと作り込まないとダメなんでしょうね。徐々に学習予定です。

 

また、次回

 

#ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング