8/45

三回目ーーheader、main、footer、＜div class="○○"＞ーー

今回は短いです。

全体のレイアウトになる三構成の表示について学びました。

　前回の終わりに言った通り、次は全体のレイアウトに関してです。

　今まではテキストや画像の表示、その大きさや高さの変更、リンクとURLについて、HTMLを使うにあたり必須項目で、Webサイトの一部分でしかありませんでした。

　今回は文字通り全体のレイアウト

　　　　　・ヘッダー

　　　　　　　　なろうの検索ページのTOPやランキングと表示されている上部メニュー

　　　　　・メイン

　　　　　　　　いくつもの小説が表示されている主要コンテンツ

　　　　　・フッター

　　　　　　　　お問い合わせや利用規約などある下部メニュー

　Webページを構成する三つの表示方法について学びます。

　１．レイアウトを指定する

　　　レイアウトについて再確認しておきます。

　　　レイアウトとは部屋の模様替えのようなもので

　　　Webページのデザインを決め見栄え良くすることです。

　　　先に説明した通り

　　　　　・ヘッダー＝header

　　　　　・メイン＝main

　　　　　・フッター＝footer

　　　この三つを使い、三構成で作り上げます。

　　　そして、構成するためには『div』という要素を使い、それぞれグループ化します。

　　　『div』＝division(ディビジョン)

　　　私はパンデミックで荒廃したニューヨークが舞台のゲームを思い浮かべますが当然違います。

　　　HTMLではグループ化することで複数の項目を一つに纏め見やすくします。

　　　なろう小説のタイトル、あらすじ、ジャンル、キーワード諸々が一つになって表示され分けられているのをイメージすればいいでしょう。

　　　それでは例に移ります。

　　　　　</div>

　　　　　</div>

　　　　　</div>

　　　使い方として『HTML』ファイルに、このように書きます。

　　　上には前回の『HTMLのバージョンの宣言～定型文の<head>』が入りますが、今回は省いています。

　　　三つそれぞれが『div』によってグループ化され、その中にテキストや文字のプログラムを書くことになります。

　　　見て分かる通り、それぞれ『class』が付いています。

　　　これを用いるということはクラス名を付けるという意味で、『div』を個別に認識してくれるようになったのです。

　今回は短いですが、以上が三回目の学習内容となります。

　次は三つの構成の書き方について学んでいきます。

最終目的

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

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

　・フリーソフトで販売

短期目標

　・大まかな流れを覚える

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

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