10/45

四回目ーーフッターに関してーー

凄くうれしい感想ありがとうございます。

丁度今日、従姉からおすすめされたRPGツクールの体験版をダウンロードしました。

まだマップしか作っていないのですが、なんとなくゲームの作り方というか、ファミコンやゲームボーイなどの私が初めてやったゲームはこんな感じだったと思い出し懐かしい思いがしました。まあ、最初はゲームボーイ(カラーではない)のマリオで色なんてなかったですが。

現在学んでいる事にひと段落付けばホームページの作成モドキが出来ると考えています。

その後に目的であるゲーム作りに関わろうと考え、RPGツクールを使いマップを作ってみようと思っています。感覚では結構大変なので、やって良いのか知りませんがゲームのマップを手本に作っていこうと思います。

今回はフッターです。

小難しい事を遠回りしながら説明しているので分かり難いかもしれません。

もし知りたくて分からない人がいれば質問してください。合っている保証はありませんが答えます。

　前回に引き続き、今回は下部メニューの『footer(フッター)』について学びました。

　勘の良い人は

　「何となくだが、ヘッダーと同じ感じじゃない……？」

　と思うことでしょう。

　事実、ヘッダーが下部に移動したのとほぼ変わらないので難しく考える必要はありませんでした。

　私、勘の良い人間は好きですよ。

　では、説明に入ります。

　１．フッターの構造

　　　おさらいからします。

　　　フッターとは、Webページの一番下に表示されているメニューの事です。

　　　なろうのTOPページでいうと

　　　「『小説を読もう！』～『なろうデベロッパー』」と9個ほどリンクがあり、その下に運営さんの名前が英文字で入っている部分です。たぶん。

　　　構造としてはサイトごとに様々な形――レイアウトのデザインがありますが

　　　【ロゴを左側に】

　　　【メニューを右側に】

　　　【メニューは縦並び】

　　　今回は以上の三つを行いたいと思います。

　　　前回のヘッダーは、ロゴと一緒にメニューも一行で表示させる方法でした。

　　　それを縦にする？

　　　左右に分ける？

　　　そもそも『footer』だけで下に表示されるの？

　　　と思うでしょう。

　　　もう一度言いますが、基本は変わりないので難しく考える必要はありません。

　　　『header』が『footer』に変わり、今まで学んだ事柄を使うだけなのです。言うは易く行うは難しではあるのですけども……こればっかりは自分で作って感じるしかないかもしれませんね。

　　　では例に移ります。

　　　例

　　　　　『HTML』(定型文等は省きます)

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

　　　<ul>

　　　 <li>プログラミングとは</li>

　　　 <li>HTMLとは</li>

　　　 <li>CSSとは</li>

　　　 </ul>

　　　 </div>

　　　 </div>

　　　　　　　<ul>

　　　　　　　　<li>ドラゴンファンタジー</li>

　　　　　　　　<li>ファイナルマリヲ</li>

　　　　　　　　<li>スーパークエスト</li>

　　　　　　　</ul>

　　　　　　</div>

　　　※ヘッダー、メイン、フッターに分けています。

　　　次に『CSS』のプログラムを書きますが、幾つか注意事項が入るので逐次説明を入れます。

　　　まず、『footer』のリスト『li』を【右側へ】変更させようと思います。

　　　そこで以下の様に入力しましたが……

　　　li {

　　　　float: right;

　　　}

　　　これでは『HTML』ファイルに書かれた【全ての『li』】に変更を与えてしまい、せっかく作ったヘッダーも変更されてしまいます。

　　　今回したいのはヘッダーのリストは左側、フッターは右側に表示したいのです。

　　　なので、防ぐために『li』を適用させたいクラスを指定して変更させます。

　　　ヘッダー

　　　　　.header-list li {

　　　　　　float: left;

　　　　　}

　　　フッター

　　　　　.footer-list li {

　　　　　　float: right;

　　　　　}

　　　※『class』なので【.】を付けなければなりません。

　　　このように二つに分けて書かなければなりません。

　　　意味は『ヘッダーリストの『li』』、『フッターリストの『li』』と考えてください。

　　　これで

　　　ヘッダー

　　　　　　　ロゴ、○○、○○

　　　フッター

　　　　　　　ロゴ　　　　　　　　　　　　　　○○、○○

　　　こんな感じになるわけです。

　　　ドラゴン○エストで「さくせん」を「ガンガンいこうぜ」にして「たたかう」を連打していれば回復が出来ず全滅しますし、MP切れでボス戦が困難になりますよね。だから命令させたい時は「さくせん」を「めいれいさせろ」に変えてプレイヤーが個別に行動を選択するわけです。

　　　これと同じようなものだと思っています。

　　　面倒ですが、慣れていきましょう。

　　　【{}】の中に空白『padding』や文字の大きさ『font-size』を書けばそれぞれ変更できるので、同じと言っているのはこの辺りも言えます。

　２．フッターのレイアウト

　　　では、次にヘッダーを作った様にレイアウトを整えていきます。

　　　今の段階では

　　　ロゴ　　　　　　　　　　　　　　　　　○○、○○、○○

　　　リストは横並びですね。

　　　次はこれを縦並びの状態で右に移動させたいと思います。

　　　　　.footer-logo {

　　　　　　float: left;

　　　　　}

　　　　　.footer-list {

　　　　　　float: right;

　　　　　}

　　　以上の二つとなります。

　　　何が違うかというと

　　　先ほどは『footer-listのli』に対して【右側へ】としましたが

　　　今回は『footer-list』自体に対して【右側へ】としたのです。

　　　元々表示される方法は縦並びなので、『div』でグループ化されたクラスをそのままそっくり移動させたということになります。

　　　こんがらがるから最初からやれと思うでしょう。

　　　ただ、小説は右から読むので使い時はあると思います。

　　　ロゴに対しても移動の命令を行うのは

　　　ロゴの行の命令が何もない為、リストを移動させても段差が出来て不格好になってしまうからです。

　　　ロゴ

　　　　　　　　　　　　　　○○

　　　こうなるということです。

　　　とまあ、これでフッターの八割ほどが出来上がりました。

　　　残りはヘッダーを作った時と同じく、先ほども触れた

　　　文字の大きさ＝『font-size』

　　　文字の色＝『color』

　　　空白＝『padding』

　　　背景＝『background-color』

　　　高さや幅＝『width、height』

　　　これらを使い整えていくことになります。

　　　今回はこれで終わります。

最終目的

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

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

　・フリーソフトで販売

短期目標

　・大まかな流れを覚える

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

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