CSS-floatレイアウト

floatとpositionの違い

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

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

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

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

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

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

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

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

レイアウト構成の概要

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

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

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

注意点として、要素にfloatを指定するときは、必ずwidthを指定する必要があります。

ブラウザによってはwidthが定義されていなければ、正しく回り込みが行われない可能性が発生します。

floatプロパティ

floatプロパティは、指定された要素を左右に寄せて配置する際に使用します。

後に続く内容は、その反対側に回り込みます。

指定	説明
left	指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
right	指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。
none	特に配置を指定しません。これが初期値です。

回り込みを解除する

floatプロパティは後続の要素に対して影響します。

floatの回り込みを解除する場合には「clear」を指定します。


clear:left;
clear:right;
clear:both;

float段組

対象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="container">  
    <div id="header">  
      <p>ヘッダー部分</p>
    </div>  
    <div id="contents">  
      <p>コンテンツ部分</p>
    </div>
    <div id="sidebar">  
      <p>サイドバー部分</p>
    </div>  
    <div id="footer">  
      <p>フッター部分</p>
    </div>  
  </div>  
</body>
</html>

CSSの作成

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

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


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

コンテンツを包括する要素として「container」を作成します。

左サイドバー作成のためにsidebar要素を「float: left;」とし、contentsを右側に配置するために「float: right;」とします。


/* containerの指定 */ 
#container {
  text-align: left;
  width: 100%;
}

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

/* contentsの指定 */
#contents {
  width: 85%;
  float: right;
  background-color: #C0C0C0;
}

/* sidebarの指定 */
#sidebar {
  width: 14%;
  float: left;
  background-color: #C0C0C0;
}

/* footerの指定 */
#footer {
  text-align: center;
  clear: both;
  background-color: #696969;
}