良くあるレイアウトタイプ
【STEP2】基本レイアウトを決める
左を二段組み,右を三段組みと言いい、どちらかの構成を選びます。では、それぞれの部分を通常どのように使うかを整理しましょう。
| ※CSS,XHTMLでレイアウトする場合に重要な概念です | |
| ヘッダー |
ページの大見出し, ホームページのイメージ画像, メニューボタンを配置することもあります。 |
| コンテンツ | メイン,サブ（,サイド）を含んだ部分 |
| メイン | メインコンテンツを書く（ここです） |
| サブ | メニュー（余白ができたらアドセンスなどの広告） |
| サイド | サブメニュー（余ったらアドセンスの広告など） |
| フッター | Copyright © や、メニュー補助,広告など |
二段組みは、シンプルな操作性で好感を持たれやすいと思いますよ。ノテータ式−ホームページ作成講座では、サブが右側にある二段組みのテンプレートを作成します。サブ部が左にあるホームページも良く見かけますが、それは、非常に簡単な作業で対応可能ですので、CSSにコメントを入れるようにします。
三段組みは、メニューのスペースが多く、大規模ホームページ向けです。個人のホームページでは、余程でない限り必要ないように思います（広告ベタベタなら別ですが、あまりお勧めしません）。
将来、三段組みのテンプレートが必要になっても、簡単に対応できる知識が付きますので、ご安心を。
二段組みレイアウトのフレームワーク
CSSとXHTMLを見てみましょう
ここからは、手入力では効率が悪いので、事前に例題対応済のファイルをダウンロードできるようにしました。zip形式で圧縮されていますので、展開してご利用してください。
【STEP2】CSSファイル
要所の解説をしますので、全体はダウンロードしたファイルを展開して、style.cssを参照ください。
CSSの約束毎ですが/*と*/で括られている区間はコメントです。コメントを見ればCSSでやっている内容が判るようになっていますので、全体を見るときはそれを参考にしてください。
基本デザインで最も重要なところを抜き出すと、上のとおりです。赤の部分で、メインを左側に設定し、緑の部分でサブを右に設定しています。それ以外は、淡々と幅を設定しているだけです。
【STEP2】XHTMLファイル
赤の部分はCSS(style.css)を読み込みなさいという指示です。
CSSとXHTMLの関連性については、CSSの#AAAと、XHTMLの<div id="AAA"> が対応していることをstyle.cssとtemplate.html全体でご確認ください。
XHTMLは、適切に字下げして書くと、<div id="AAA">（開始）と、</div>（終わり）が判りやすいですね。contentsの中にmainとsubがある構成だということが良く判ります。
基本レイアウト用CSSとXHTMLのプレビュー結果
【STEP2】プレビュー実行
XHTMLをCrescnt Eveでプレビューしてみます。（プレビュー方法を知りたい方→プレビュー方法）
便宜的に各部に色を付けていますが、文字のある範囲しか色が付かないので、これで正解になります。最終的には画像を重ねますので、全体が大きく整います。
「CSSとXHTMLでレイアウトを決めよう」は以上です
如何でしたか？次はヘッダー部を装飾します。
