14/45

六回目ーー『HTML』実践前編、なろうホームページ参考ーー

今回は実践編です。

何度も予告した通りホームページを習ったプログラムで作ります。

恐らく変な所が多いと思いますがよろしくお願いします。

なろうのホームページを参考にして作っています。

二次創作になるのかよく分からないですが、著作権を侵害しているような気もするので駄目なら教えてください。

　…………ふぅ。

　少しばかり遅くなりました……が、どうにか良い感じに出来上がってきましたので、報告を始めたいと思います。

　あ、その前に実戦をしてみて気付いたことを先に言っておきます。

　『百聞は一見に如かず

　　百見は一考に如かず

　　百考は一行に如かず

　　百行は一果に如かず』

　部分的に学び出来た気になっても、一から作ってみると勝手が大きく違うことに気付いたのです。

　今回は一から作ったとはいえ、ページのソースを開き順番やプログラムを参考にしているので言葉通り作れたとは言えません。

　それでも学ぶことは多く、習った以上に要素の使い方が幅広い事を知りました。

　特に

　『HTML』は上から順に表示される為、考えて書かないと思った通りに表示されない

　ということです。

　思った通りに表示されずイラつくこともあり、何でそうなったんだと思った通りの結果でも理解できておらず、駄目と分かってもなんとなくでプログラムを書く。

　明確な答えが欲しい私には複数の答えがあるのは多少頭を悩ませてしまいます。

　今回も内容とプログラムを書きますが、分かり難いと思うので画像を張り付けておきます。

　プログラムの書き方はまだわからないのですが(『HTML』と『CSS』を交互に書けばいいのか、片方から書いていくのか)

　今回は『HTML』から先に書いたので、前編と後編に分けて報告します。

　では、早速始めたいと思います。

<!DOCTYPE html>

<html>

<head>

<title>プログラムを作ろう</title>

</head>

<body>

<div class="header-logo">プログラムを作ろう！</div>

<a><p>◆ケータイ版はこちら</p></a>

<p>プログラムを作ろう！　は私、049がゲームを作るまでの日々と学んだ記録を綴る淡々とした物語である。</p>

<ul>

<li>ランキング</li>

<li>公式ブログ</li>

<li>プログラム検索</li>

<li>プログラマーになろう</li>

<li>ユーザー登録</li>

</ul>

</div>

</div>

</div>

　何を説明すべきか悩み

　軽くプログラムの内容と気付きを説明していきます。

　とはいえ、この状態のプログラムは説明するまでもないと思います。

　『内容』

　●形式を決める定型文、タブのタイトル、『CSS』の読み込み

　●ヘッダーというのもクラス名でしかなく、書こうと思えばリストの上に画像や文字を表示できる。そのために順番を考える。

　●順番で並ぶ物には『li』を使うと纏められる。

　『気付き』

　●『CSS』は無くとも『HTML』に加えて書けるらしい。

　そして、これが一番大事。

　【表示できた時は感動した】

　この一言に尽きました。

　今は『CSS』も書き始めているので他の問題や感動があるのですが、最初の感動は今でも忘れられません。

　プロやアマチュアなどプログラムを知っている方も感じたことがあるのではないでしょうかね。

　では次です。

　先ほどはヘッダーだったので、次はフッターの方を先に書きました。

<ul>

<li>プログラムを作ろう！</li>

<li>公式ブログ</li>

<li>お問い合わせ</li>

<li>プログラマーになろう</li>

<li>プライバシーポリシー</li>

<li>なろうデベロッパー</li>

</ul>

<p>©049project.</p>

</div>

　『内容』

　●表示は基本ヘッダーと変わりません。

　●最後の『p』の©(＝コピーライト)は株式会社名や運営などの名前を記す物で、著作権を表しているそうです。

　『気付き』

　●著作権は大事です。

　次はメインとなります。

　が、先に言っておかないといけないことが一つ。

　現在『CSS』を書き始めているのですが、それなりに不都合が出てきたため書き換えている箇所が複数あります。

　例えばクラス名――これが一番変更されています。

　メインは長いので前半と後半に分けます。

<p>ゲームを作るにはプログラム！　RPGツクールもあるよ！</p>

</div>

<h3>人気キーワードから探す</h3>

<a><span>→その他の人気キーワードから探す</span></a>

<a href="URL">JavaScript</a>

<a href="URL">Python</a>

</div>

<!-- 広告が入りますが、私は画像での広告法を知らないので省きます。

一応枠だけ取ります。-->

</div>

<p>プログラムPickUp!<a href="URL">［？］</a></p>

<li>

<div class="program-title1">ズブの素人な私が、プログラミングを覚えてゲームを作るまで</div>

作：049／連載中／エッセイ〔その他〕

　皆さんは『プログラミング』が何なのか知っていますか？　そうゲームやアプリを作る時に使われる英語や記号ばっかりのアレです。勿論それだけではありませんが。

　恐らく、多くの人が言葉を知っていても詳しい事まで知らないと言うでしょう。かくいう私も言語が複数あり小難しいイメージしか持っていません。今回はタイトル通りド素人の私がゲームを作れるまでの学習過程を綴る小説……日記となります。

　昨今は小学生にプログラミングを教えるのが必修化になる等聞きます。危機感を覚えるわけではないですが、現在の私は胸を張って社会人と言える立場にいないので、兎に角思い立ったが吉日と覚えていき就職に役立てたいと思いました。

　こんなの小説じゃない、と思われるかもしれませんが、何分性格が性格な上友達って何？　というボッチなのでせめてこの場をお借りしてモチベーション維持に当てさせてもらおうと思いました。相変わらず豆腐メンタルで精神が不安定なので長続きするか分かりませんが、可能な限り続けていきたいのでお付き合いのほどよろしくお願いします。

　プログラミングを知っている方、若しくはプロの方、目に留まり覗いてみてくれるとありがたく、ご指摘やアドバイス等を下さるととてもうれしく思います。勿論私と同じく素人の方からの感想や初めたいけど不安という方もぜひ覗いてどのようなものか一緒に考えてみましょう。

　ジャンルは不明なのでエッセイにしておきました。

</div>

</a>

</li>

<li>

作：○○／連載中／歴史〔文芸〕

○○

</div>

</a>

</li>

<li>

作：○○／連載中／VRゲーム〔SF〕

○○

</div>

</a>

</li>

<li>

作：○○／連載中／ハイファンタジー〔ファンタジー〕

○○

</div>

</a>

</li>

</div>

</div>

　変更点は『CSS』で変更した時に書こうと思っています。

　『内容』

　●メインは中央上部と三つの構成からなるので、大きく四つのクラスで分けます。その順番を変えなければいけなくなりました……とほほ。

　『気付き』

　●クラス名は考えて付けること。

　　以前分かりやすい名前を、と言った気がしますが、それ以上に同じクラス名は『CSS』で同じ変更がされる為、打ち込みを少なくコンパクトにする為にもクラスを考えて決めないといけないです。

　●また『div』以外にもクラス名を付けられるので考える。

　他にもいろいろな気付きなどが合ったのですが、結構精神的に疲労が溜まるので覚えていません。想像以上に『CSS』は考えることだらけなんです。

　もっともっと勉強して実践しないと分からないことだらけです。

　『HTML』のプログラムは文字の結果だけなのでまだすごく簡単なんですがね。

　プログラムの書き方は複数あり、数学の様にこの公式を使い答えが一つではないんです。

　それが余計に思考をこんがらがせて大変です。

　まだ習っていないから出来ないのか、習っていても使い方が悪いのか、それさえも分からない。

　恐らく、多くのプログラマーも通った道なんでしょう。

　気の削がれる愚痴申し訳ないです。

　それでは次は後編、メイン後半となります。

最終目的

　・勿論手に職を付ける、若しくはお金を稼ぐ

　・簡単なゲーム(リバーシや簡易シューティングなど)を作る

　・フリーソフトで販売

短期目標

　・大まかな流れを覚える

　・プログラミングを理解する

上記の内容は覚える中で変わることがあると思います。