body要素内を記述する

ビジュアル的に重要なbody要素

body要素のコーディングに入る前に、もう一度XHTMLとCSSの役割を確認しましょう。

XHTML: 構造化
CSS: 視覚的表現

まず最初に、XHTML要素により大まかな構造化を行います。

ワイヤーフレームの確認

コーディング前に作成したワイヤーフレームを確認します。

ワイヤーフレームを上から順に見ていくと、logo、head_navigation、、global_navigation、main_visual、information、side_navigation、footerとなっています。順にテキストを打ち込んでいきましょう。

TEXT

logo
head_navigation
global_navigation
main_visual
information
side_navigation
footer

では次にXHTMLの要素を付加することで構造化していきます。

XHTMLの要素を付加して構造化を行う

body要素内部を3つのパートに分けて考えましょう。

ロゴやナビゲーションメニューを含むヘッダー
ページ毎のオリジナルコンテンツを含むメイン
コピーライトなど補足的な情報を含むフッター

以上3つのヘッダ、メイン、フッター全体を含むラッパーも用意します。

HTML

<div id="wrapper">
    <div id="header">
        logo
        head_navigation
        global_navigation
    </div>
    <div id="main">
        main_visual
        information
        side_navigation
    </div>
    <div id="footer">
        footer
    </div>
</div>

CSSでレイアウトの基本を調整する

ヘッダ、メイン、フッター、ラッパーそれぞれのスタイルに手を加えていきましょう。

全体の横幅を決定する

CSSセレクタ：#wrapperのwidthプロパティに800pxを設定します。また、範囲がわかるように一時的に色を付けておきましょう。background-colorプロパティで#000（黒色）を指定します

CSS

#wrapper {
    width: 800px;
    background-color: #000; /* 黒 */
}

ヘッダ、メイン、フッターの範囲の可視化

#header、#main、#footerに対して、一時的に線と色を付けておきましょう。作業範囲がわかるようにするためです。borderプロパティとbackground-colorプロパティを利用します。

CSS

#header {
    border: 1px dashed #f00;
    background-color: #eee; /* かなり薄い灰色 */
}
#main {
    border: 1px solid #0f0;
    background-color: #ccc; /* 少し薄い灰色 */
}
#footer {
    border: 1px dotted #00f;
    background-color: #aaa; /* 薄い灰色 */
}

ここまでの様子を実際にブラウザで見てみましょう。

wrapper、head、main、footerだけのサンプル文書

横長のラインが3つあるだけですが、初めのうちはこんなものです。

ここまでの確認

ここまでのXHTML+CSSによる記述で、上のような表示が行われることについて簡単に解説します。

親子関係

現在のXHTML文の構造を確認しましょう。HTML要素の中にdiv要素id名wrapparがあり、その中にdiv要素id名header、div要素id名main、div要素id名footerが並列的に含まれています。図にすると、以下のようになります。

bodyから見ると、子がwrapper、孫（子孫）がheader、main、footer
wrapperからみると、親がbody、子がheader、main、footer
headerから見ると、親がwrapper、先祖がbody、兄弟がmain、footer
mainから見ると、親がwrapper、先祖がbody、兄弟がheader、footer
footerから見ると、親がwrapper、先祖がbody、兄弟がheader、main

スタイルのプロパティ（特性）は、先祖要素から継承されるものとされないものがあります。どのプロパティが継承されるかはcssの仕様に定義されています。大まかに「color、fontなどのフォント関係とlist-styleなどのリスト関係は継承される。その他（margin、padding、border、display、position、floatなど）は継承されない」と覚えておくとよいでしょう。問題が生じたら仕様を確認しましょう。

値の設定

■ 横（幅）
wrapperに対してwidth:800pxを指定しているため、横幅は800pxです。wrapperの子であるheader、main、footerはwidhtの指定をしていないため、横幅は自動で設定されます。今回のケースでは、親の幅と同じサイズで計算されています。

■ 縦（幅）
どの要素においても縦幅(height)の指定はしていないため、自動で決定されます。今回のケースでは、wrapperの縦幅は子であるheader、main、footerの縦幅の総計となっています。

■ 背景
背景色はbackground-colorで塗りつぶすことができます。背景色の指定が無い場合は透明扱いとなり、親要素が透けてみえるようになります。今回のケースではwrapperの背景色に黒を設定していますが、子であるheader、main、footerの背景色に隠れているために見えません。mainの背景色を透明（または設定なし）にすると、wrapperの背景色である黒が見えるようになります。

■ テキスト
XHTMLソースの中では「logo」「head_navigation」など、改行して記述していますが、ブラウザでの表示では改行されません。それぞれの文字の間に半角スペースが1つ分あるだけです。ソースコード中にタブ・半角スペース・改行などが連続されているとブラウザは1つの半角スペースなどにまとめてしまいます。テキスト行を強制的に区切りたい場合はbr要素を使う必要があります。またはブロックレベル要素でそれぞれを囲むことによって改行と同じ効果を生み出すことも可能です。

→次のページ：構造化を進めよう

←前のページ：head要素内を記述する