20111014ｗｅｂサイト作成について ０８

(X)HTML,CSS覚書
～領域の設定について　その１～

　無料のブログサイトをのぞいてみると、非常に多くのテンプレートが準備されています。そのテンプレートの中には、横が２列または３列になっている物が多く存在します。
　左側はメニュー類、右側はブログの本文といった感じで構成されています。
　そして、それに加えて上部は画像とタイトル、下部にはフッターを設定しているページもよく見かけます。

　最終的にはこのようなページ内容を固まりに分けることを目標にして、これから数回で説明していきます。
　とりあえず今回はその初歩段階である、内容ごとに固まりに分けることを行います。

　内容ごとの固まりに分ける時に使うのが、divです。
　例えば、次のような感じになります。

<div>
<h1>タイトル</h1>
</div>

<div>
<h2>サブタイトル</h2>
<p>ちょっとした説明</p>
<h3>内容１</h3>
<p>内容１の説明</p>
<h3>内容２</h3>
<p>内容２の説明</p>
</div>

<div>
メニュー
内容１
内容２
</div>

<div>
<p>copy right(C) 2011 All rights reserved.</p>
</div>

　とりあえず、上から「タイトル」「サブタイトルと内容」「メニュー」「フッター」の４つの固まりに分けてみました。とりあえず、これらの内容を「index.html」に保存しておくことにしておきます。

　今回divを使って固まりに分けたからといって、すぐに何かの効果が現れるわけではありません。
　さらに細かな設定をしなければ、今のところは、「とりあえず人の思考のために分けました」という程度なので、パソコンで見てみるとdivを設定する前と何も変化がありません。