Webサイト制作におけるページ幅がウィンドウサイズに合わせて変化するコーディングの方法

HTML CSS

Webサイト制作において、表示されるページの幅がブラウザのウィンドウサイズに合わせて変化するコーディングの仕方をまとめておく。

ポイントは以下の通り。

  • CSSでページ全体の幅（下記コード内の#wrapper）を％単位で指定する（100％ならウィンドウの両端間の幅になる）。
  • ％単位で指定した幅は、指定したmargin分を足し引きした残り分を100％とみなす（下記コード内の#primaryの場合、ウィンドウ幅から145pxを引いた残り全部の幅が100％分になる）。
  • 可変にしたい部分の幅（下記コード内の#containerや#primary）は上記同様に％単位で指定する。ただし、float指定で横並びにしたい２つのブロック（下記コード内の#primaryと#secondary）に対しては、片方を必ず固定幅（px単位）で指定する。
  • float指定で横並びにしたい２つのブロックのうちのどちらかに、もう一方が横並びになるために必要な大きさ（幅）以上のmarginを指定する（下記コード内の#primaryのマイナスのmargin値。#secondaryの幅以上であることが必要）。

※上記マイナスのmargin値（pxの固定値）より横並びにしたいブロックの幅が小さくなるのであれば、横並びにしたい2つのブロックの幅をともに％で指定しても横並びにはなる。
←クリックで拡大表示

以下、コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>リキッドデザイン２カラム</title>
<style>
/* リセット -----------------------------------------------*/
body, div, p, ul, li, a, h1 {
		margin: 0;
		padding: 0;
}
ul {
  list-style:none;		
}
/*  2カラム---------------------------------------------------*/
#wrapper {
　width: 100%;
  line-height: 1.7;		
}
#header {
  background: #DDD;
  padding: 10px;	
}
#container {
  float: left;
  width: 100%;		
}
#primary {
  float: right;
  width: 100%;
  margin: 10px 0 10px -145px;/*  左方向に負のマージンを指定  */
  background: #C7D;
}
#content {
  margin-left: 155px;
  padding: 10px;
  background:#cdd;
}
#secondary {
  float: left;
  width: 145px;
  margin: 10px 0 10px 0;	
  background:#9FC;	
}
#footer {
  clear: both;
  text-align: center;
  height: 50px;
  line-height: 50px; /* line-heightとheightの高さをあわせる */
  background:#FF9933; 		
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1>リキッド2カラム</h1>
  </div>
  <!-- header end -->
  <div id="container">
    <div id="primary">
      <div id="content">
      こんにちはこんにちはこんにちはこんにちはこんにちはこんにちは<br>こんにちはこんにちはこんにちはこんにちはこんにちはこんにちは<br>こんにちはこんにちはこんにちはこんにちは 
      </div><!-- content end --> 
    </div><!-- primary end --> 
    <div id="secondary">
      <ul>
        <li>リスト１</li>
        <li>リスト２</li>
        <li>リスト３</li>
        <li>リスト４</li>
      </ul>
    </div><!-- secondary end --> 
  </div><!-- container end --> 
  <div id="footer">
    <small>&copy;&2013 ○○××</small>
  </div><!-- footer end -->
</div><!-- wrapper end -->
</body>
</html>

以下、表示結果。
←クリックして拡大表示

また、ページの幅の最大幅と最小幅を指定（固定）して、その間でのみウィンドウサイズに合わせて可変するようにしたい場合は、上記コードのCSSの#wrapper部を以下のように変更する。

#wrapper {
  width: 100%;      /* 幅をウィンドウサイズに合わせて100％に指定*/
  max-width: 800px; /* 追加：幅は最大で800pxまで広がるようにする */
  min-width: 300px; /* 追加：幅は最小で300pxまで狭まるようにする */
  margin: 0 auto;　 /* 追加：ページをウィンドウ幅に対して真ん中にくるようにする */
  line-height: 1.7;		
}

なお、width、max-width、min-widthを書く順番は特に影響しないようである。