2段組幅可変レイアウト

広告

ここからは幅可変のレイアウトについて見ていきます。幅可変とはブラウザの大きさに合わせて横の表示領域を拡大縮小するタイプのレイアウトです。段組の場合でよく使われるのはメニュー部分の幅は固定のままで、メインの領域のみ可変にするという場合です。

基本的な構造は幅固定の場合と同じですので、2段組の場合は下記のようになります。

2段組幅可変レイアウト

スタイルシート側の修正点としては、幅が可変ですので、「wrapper」要素や「contents」要素に設定した「width」プロパティを外します。

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

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

次に幅を固定したい「navi」要素に関しては固定幅レイアウトの場合と同様に「width」プロパティを設定し、そして「float:left」を設定しておきます。「main」要素に関しては「width」プロパティを外し「float:right」も外します。

「main」要素にも「float」プロパティは設定しておいても良さそうですが、「float」プロパティを設定する場合いは「width」プロパティも合わせて設定しなけばいけない仕様となっているため幅を設定しない「main」要素には「float」プロパティを設定しません。ただ設定しなくても「navi」要素に「float:left」を設定しているので「main」要素はその右側に回りこんで表示されるはずです。

#navi{
margin:0;
padding:0;
float:left;
width:150px;
}

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

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

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

この段階で一度表示を試してみましょう。

sample5-1.html

css5-1.css

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

2段組幅可変レイアウト

何かおかしいですね。メニューが左側に来て、メインのコンテンツはその右側に回りこむはずなのですがそうはなっていません。これはHTML内の記述の順番が影響しています。幅固定レイアウトの場合は「navi」要素も「main」要素も「float」プロパティを指定していたので、HTML文内での記述する順番に関係なく意図した場所に表示されていました。今回は「main」要素には「float」プロパティを指定していないため、「main」要素がHTML内で先に記述されていると、まず「main」要素を普通に表示してから「navi」要素の部分が表示されるため上記のようになってしまいます。

では今度はHTML文の中で先に「navi」要素を記述し、その後で「main」要素を記述してみましょう。

sample5-2.html

css5-2.css

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

2段組幅可変レイアウト

ブラウザの幅を変更すると、それに合わせてメインの表示領域の幅も変更されます。

2段組幅可変レイアウト

ただ、現在のままではメニュー部分の高さよりも、メインの領域の高さが大きい場合にメニューの下にもぐりこんでしまう形で表示されてしまいます。これを防ぐ為に「main」要素の「margin-left」にメニュー領域の幅と同じだけの幅を設定することで、「main」要素自体を右にずらしてしまうことで対応が出来ます。

#navi{
margin:0;
padding:0;
float:left;
width:150px;
}

#main{
margin:0 0 0 150px;
padding:0;
background-color:#ffffff;
}

以上で2段組の可変幅のレイアウトは完成です。では実際に試した結果を見て見ましょう。

sample5-3.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/css5-3.css" type="text/css">

</head>
<body>

<div id="wrapper">

  <div id="header">

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

  </div>

  <div id="contents">

    <div id="navi">

      <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="main">

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

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

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

    </div>

  </div>

  <div id="footer">

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

  </div>

</div>

</body>
</html>

css5-3.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;
background-color:#f0f8ff;
}

#navi{
margin:0;
padding:0;
float:left;
width:150px;
}

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

#main{
margin:0 0 0 150px;
padding:0;
background-color:#ffffff;
}

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

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

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

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

2段組幅可変レイアウト

2段組幅可変レイアウト

( Written by Tatsuo Ikura )