基本構成

広告

まずHTML全体の大枠の部分を作成していきましょう。

まずブラウザの領域全体の色を設定します。これには<body>要素の「background-color」プロパティに色を設定することで対応します。

body{
margin:0;
padding:0;
background-color:#dcdcdc;
}

次にコンテンツを配置するための領域を1つ用意します。全てのコンテンツはこの領域の中に配置します。なぜ<body>要素の中にこのような領域を作成するかといいますと、幅を固定したレイアウトにする場合の幅の指定に使うためです。

<div>要素を使い、属性として「id=wrapper」を指定して作成します。

#wrapper{
margin:0;
padding:0;
background-color:#ffffff;
}

またコンテンツ領域全体の中で、ヘッダー部分、コンテンツ部分、フッター部分の3つの領域に分けておきます。レイアウトによってはこのような単純な分け方では無理な場合もありますが、とりあえず基本レイアウトということでこのようにしておきましょう。

それぞれ<div>要素を使い、属性としてヘッダー部分には「id=header」、フッター部分には「id=footer」、コンテンツ部分に「id=contents」を指定して作成します。

#header{
margin:0;
padding:0;
background-color:#eee8aa;
}

#contents{
margin:0;
padding:0;
}

#footer{
margin:0;
padding:0;
background-color:#eee8aa;
}

イメージ的には下記のような感じです。

レイアウト構成

ではいったんこの時点で実際に作ってみましょう。

sample1-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>レイアウトサンプル</title>

<link rel="stylesheet" href="./css/css1-1.css" type="text/css">

</head>
<body>

<div id="wrapper">

  <div id="header">

    <p>
    レイアウトサンプル
    </p>

  </div>

  <div id="contents">

    <p>
    ここでは段組のレイアウトについて細かく見ていきます。段組には主に
    2段組の場合と3段組の場合が多く用いられています。
    </p>

    <p>
    幅を固定する場合にはブラウザの横サイズに関わり無く一定の幅で表示
    します。それに対して幅を固定しない場合にはブラウザの横サイズの大
    きさに合わせて表示されるコンテンツの幅も自動的に変更されることに
    なります。
    </p>

    <p>
    幅を固定しない場合でも、メニュー画面などは固定の幅にして、メイン
    コンテンツの部分だけを幅可変にすることが多いです。
    </p>

    <ul>
    <li><a href="./sample1-1.html">スタイルシート詳細へ</a></li>
    <li><a href="./sample1-1.html">HTML詳細へ</a></li>
    <li><a href="./sample1-1.html">JavaScript詳細へ</a></li>
    <li><a href="./sample1-1.html">XML詳細へ</a></li>
    </ul>

  </div>

  <div id="footer">

    <p>
    お問い合わせはxxxxまで
    </p>

  </div>


</div>

</body>
</html>

css1-1.css

@charset "Shift_Jis";

body{
margin:0;
padding:0;
background-color:#dcdcdc;
}

#wrapper{
margin:0;
padding:0;
background-color:#ffffff;
}

#header{
margin:0;
padding:0;
background-color:#eee8aa;
}

#contents{
margin:0;
padding:0;
}

#footer{
margin:0;
padding:0;
background-color:#eee8aa;
}

p{
margin:0;
padding:10px;
}

実際にブラウザで見てみると下記のようになります。

基本レイアウト

( Written by Tatsuo Ikura )