CSS-positionレイアウト



CSS レイアウト(positionの利用)

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


レイアウト構成の概要

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

・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;
}


関連

CSS

CSS-floatレイアウト

CSS-positionレイアウト

CSS-フッターの固定






スポンサード リンク