3段組幅固定レイアウト

広告

次に3段組の幅固定レイアウトについて見ていきます。2段組の場合「navi」と「main」の2つに領域を分けていましたが、3段組の場合は「leftnavi」と「maincontents」に分けて、さらに「maincontents」内を「main」と「rightnavi」の領域に分けます。結果として3段組になります。

構成的には下記のような感じとなります。

3段組幅固定レイアウト

「leftnavi」を左側に、「maincontents」を右側に配置しますので、「float」プロパティを使い「leftnavi」には「float:left」を、「maincontents」には「float:right」を設定します。またそれぞれの領域の幅も「width」プロパティで設定します。

#wrapper{
margin:0 auto 0 auto;
padding:0;
background-color:#ffffff;
width:450px;
}

#contents{
margin:0;
padding:0;
width:450px;
}

#leftnavi{
margin:0;
padding:0;
float:left;
width:120px;
}

#maincontents{
margin:0;
padding:0;
float:right;
width:330px;
}

さらに「main」を左側に、「rightnavi」を右側に配置しますので、「float」プロパティを使い「main」には「float:left」を、「rightnavi」には「float:right」を設定します。またそれぞれの領域の幅も「width」プロパティで設定します。

#main{
margin:0;
padding:0;
float:left;
width:210px;
}

#rightnavi{
margin:0;
padding:0;
float:right;
width:120px;
}

floatの設定の解除は「contents」の最後でだけ行っておけば大丈夫です。

#contents:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

スタイルシートの方はこれで完成ですので、あとはHTMLの方の中身を各<div>要素で括ってあげます。(下記は一部省略してます)。

  <div id="contents">

    <div id="maincontents">

      <div id="main">

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

      </div>

      <div id="rightnavi">

        <ul>
        <li><a href="http://www.yahoo.co.jp/">Yahoo</a></li>
        <li><a href="http://www.google.co.jp/">Google</a></li>
        </ul>

      </div>

    </div>

    <div id="leftnavi">

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

    </div>

  </div>

では実際に試した結果を見て見ましょう。背景色などの設定を追加してあります。

sample4-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/css4-1.css" type="text/css">

</head>
<body>

<div id="wrapper">

  <div id="header">

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

  </div>

  <div id="contents">

    <div id="maincontents">

      <div id="main">

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

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

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

      </div>

      <div id="rightnavi">

        <ul>
        <li><a href="http://www.yahoo.co.jp/">Yahoo</a></li>
        <li><a href="http://www.google.co.jp/">Google</a></li>
        </ul>

      </div>

    </div>

    <div id="leftnavi">

      <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>

  <div id="footer">

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

  </div>

</div>

</body>
</html>

css4-1.css

@charset "Shift_Jis";

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

#wrapper{
margin:0 auto 0 auto;
padding:0;
background-color:#ffffff;
width:450px;
}

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

#contents{
margin:0;
padding:0;
width:450px;
background-color:#f0f8ff;
}

#leftnavi{
margin:0;
padding:0;
float:left;
width:120px;
}

#leftnavi ul{
margin-top:10px;
margin-left:20px;
font-size:0.75em;
}

#maincontents{
margin:0;
padding:0;
float:right;
width:330px;
background-color:#fff0f5;
}

#main{
margin:0;
padding:0;
float:left;
width:210px;
background-color:#ffffff;
}

#rightnavi{
margin:0;
padding:0;
float:right;
width:120px;
}

#rightnavi ul{
margin-top:10px;
margin-left:20px;
font-size:0.75em;
}

#contents:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

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

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

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

3段組幅固定レイアウト

( Written by Tatsuo Ikura )