今回のポイント
floatを使ったレイアウト
clearプロパティの働き
ブロックとインラインの区別
spanタグの使い方

　前回，ページ上部に可変のヘッダ領域を備えた，本文が横並び2カラム構成のページをCSSでレイアウトできましたが，本文の下にフッタを表示させようとして困ってしまいました。今回はこれを解決する方法について説明します。

　それは「float」プロパティを使う方法です。もともとのfloatがどういう動きをするものなのか，ということから見てみましょう（リスト1）。

リスト1●floatプロパティの働きを調べるためのコード。プロパティ値にrightを設定する 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>CSSでのレイアウト</title>
<style type="text/css">
/*float:プロパティを設定*/
.FL{
  /*わかりやすいように背景色設定*/
  background-color:#ff8888;
  /*左右の動きを把握するため幅を40%に*/
  width:40%;
  float:right;
}
</style>
  </head>
  <body>

<div class="FL">
<h1>これがfloat:right;</h1>
<p>～適当なテキストを入れてください～</p>
</div>

  </body>
</html>

　divはひとつだけで，中に<h1>と<p>を含みます。このdivにはFLというクラス名を付けています。ここでは動作をわかりやすくするために，背景色を設定し，幅をブラウザ画面に対して40%としました。そして問題のfloatプロパティにrightという幅を設定しています。結果は図1のようになります。

図1●リスト1のブラウザ表示
図1●リスト1のブラウザ表示