CSS-positionレイアウト

floatとpositionの違い

floatは、コンテンツ記述スペースに対してウインドウサイズが広いときに、空きスペースを利用するための構成です。そのため、ウインドウサイズに余裕が無い場合には段組みを取り消します。

positionは、どのようなウインドウサイズであってもレイアウト（段組み表示）を変えないときに利用するための構成です。

float及びpositionプロパティは、ブラウザによって解釈が異なることがあるため、特性をうまく使い分ける必要があります。

基本的に、簡単なレイアウトはfloatを使い、複雑に固定位置を構成するレイアウトではpositionを使うといいといえます。

基本のレイアウトを変更せずにコンテンツを追加する場合では、floatよりpositionのほうがメンテナンス量が多くなります。

floatでは配置できない位置に要素を配置したいときなどはpositionを使うべきといえます。

CSS レイアウト（positionの利用）

CSSで段組レイアウトを実現するために、positionプロパティを利用することができます。

レイアウト構成の概要

レイアウトの構成において行うべきことは以下の３点です。

・body部分において、コンテンツブロックを構成する要素を包括する要素(wapper)を作成します。

・コンテンツブロック(wapper)において、内部ブロックを構成する要素を包括する要素(container)を作成します。

・コンテンツブロック要素に「positionプロパティ」を定義して位置情報を持たす。

positionプロパティ

positionプロパティは、要素の配置（基準位置）が「相対位置」であるか「絶対位置」であるかを指定します。

表示位置の指定には、「top」「bottom」「left」「right」を併用して、基準位置からの距離を設定します。

値には以下を設定します。

指定	説明
static	初期値であり、特に配置方法を指定しません。top、bottom、left、rightは適用されません。
relative	相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute	絶対位置への配置となります。
fixed	絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

position段組

対象HTMLの準備


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link href="./style.css" rel="stylesheet" type="text/css" />
 <title>CSS</title>
</head>
<body>
  <div id="wapper">  
    <div id="header">  
      <p>ヘッダー部分</p>
    </div>  
    <div id="container">  
      <div id="contents">  
        <p>コンテンツ部分</p>
      </div>  
      <div id="sidebar">  
        <p>サイドバー部分</p>
      </div>  
    </div>  
    <div id="footer">  
      <p>フッター部分</p>
    </div>  
  </div>  
</body>
</html>

CSSの作成

ブラウザによって、デフォルトスタイルシートが異なりますので、すべての要素のmarginとpaddingを0にしておきます。

要素毎に、必要に応じて個別に変更します。


/* default CSSを使用しないために定義 */
* {
  margin: 0;
  padding: 0;
}

wapperはコンテンツを構成する要素を全て包括するボックスです。

以降のボックスは全てこの中に入ります。


/* wrapperの指定 */ 
#wrapper {
  text-align: left;
  width: 800px;
}

/* headerの指定 */ 
#header {
  height: 160px;
  background-color: #696969;
}

/* containerの指定 */ 
#container {
  position: relative;
  width: 100%;
}

/* footerの指定 */
#footer {
  text-align: center;
  padding: 0.5em 0;
  background-color: #696969;
}

contentsでmarginとしてサイドバーの横幅分を確保します。

絶対配置指定の基準はcontainerです。

sidebarをcontainerを基準として上から0px、左から0pxに配置します。


/* contentsの指定 */
#contents {
  margin: 0 0 0 200px;
  background-color: #C0C0C0;
}

/* sidebarの指定 */
#sidebar {
  width: 180px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #C0C0C0;
}