お見合いパーティー


高性能検索順位チェックツール(無料)

CSS(スタイルシート)でレイアウトする

CSS(スタイルシート)を使ってレイアウトする方法はいくつかありますが、ここでは代表的な、「float」を使った段組みレイアウトをご紹介します。

下図の様なレイアウトをする場合を考えてみます。web77.infoも基本的にはこのようなレイアウトで構成されています。
レイアウトイメージ


ブロック要素を作る

まずは各エリアを構成するブロック要素を作成していきます。
htmlのbody内は以下の様になります。

<div id="whole"> <!-- 全体を包括するブロック -->

  <div id="header"> <!-- HEADER部分を構成するブロック -->
      HEADERの内容
  </div>

  <div id="contents"> <!-- CONTENTS部分を構成するブロック -->
      CONTENTSの内容
  </div>

  <div id="menu"> <!-- MENU部分を構成するブロック -->
      MENUの内容
  </div>

  <div id="footer"> <!-- FOOTER部分を構成するブロック -->
      FOOTERの内容
  </div>

</div> <!-- whole End -->


レイアウトする

上記で作成した各ブロックをCSS(スタイルシート)によって制御し、レイアウトしていきます。

/* まず全体のmarginとpaddingをリセットします。*/
* {
  margin: 0;
  padding: 0;
}

#whole {
  width: 800px; /* サイト全体の幅を指定 */
  margin: 0 auto; /* 左右のmarginにautoを指定するとセンタリングします */
}

#header {
  width: 100%; /* whole内で100%の幅になります */
  height: 50px; /* 高さを指定 */
}

#contents {
  width: 650px;
  float: right; /* CONTENTS部分を右に寄せます */
}

#menu {
  width: 150px; /* CONTENTS部分と合わせてwholeの幅と同じになるように */
  float: left; /* MENU部分を左に寄せます */
}

#footer {
  width: 100%;
  height: 50px;
  clear: both; /* floatを解除します */
}


上記のレイアウト構造で作ったサンプルがこちらです。
分かり易いように各エリアを色分けしてあります。

あとは各エリアの中に更にボックスを作ったり、marginやpaddingを設定していけば、見栄えの良いページを作ることができます。




スポンサードリンク