CSS-floatレイアウト



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

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


レイアウト構成の概要

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

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

関連

CSS

CSS-floatレイアウト

CSS-positionレイアウト

CSS-フッターの固定





スポンサード リンク