トップページ > 本文2段組 > [7]フッターを作る

CSSレイアウト[本文2段組のレイアウト-7]フッターを作る

メニューとメインスペースが出来たところで、あとは下部にフッターを入れる。フッターには、著作権情報や住所メールアドレスなどが入る。住所やメールアドレスを入れる場合は「address」要素を使った方が良い。ここでは「footer」というボックスを作り、コピーライトを表記する。

図説

clear: both;について

「side」と「main」のボックスを「float:」を使って左右に割り振った。ここで重要なのは、このfloat:を解除する宣言をしなくては、以降のレイアウトもfloat:が効いているということ。
float:を使ったら必ず、適用する範囲が終わり次第「clear:」という書式を使って、float:を解除する。clear:には「right」「left」「both」「none」の4つがあるが、「clear: both;（左右ともfloat:解除）」のみの使用で事足りる。ここでは、「side」と「main」のボックスのすぐ下に来る「footer」のボックスは、左右スペースいっぱいに配置したいので、float:が効いていてはいけない。そこで必ず「clear: both;」の指定をする。これが無いとレイアウトが崩れる。

「footer」のCSSは下記の通り。base.cssに指定している。
/* footer */
#footer {
text-align: center;
font-size: 80%;
color: #FF9933;
border-top: solid 1px #CFCCB7;
clear: both; ←コレ重要
background-color: #FFFFFF;
}
base.css
CSS_Layout/css/base.css
上記のCSSを下記のようにHTML上で呼び出して使用する。

<html>
<head>略</head>
<body>

<div id="header">略</div><!-- END header -->←ヘッダー

<div id="outlinebg">
<div id="outline">

<div id="main">
<h2 id="pankuzu">略</h2>←パンくずリスト
<div id="mainspace">
ここに本文が入る
</div><!-- END mainspace -->
</div><!-- END main -->

<div id="side">
略
</div><!-- END side -->

<div id="footer"> ←mainとsideの後の、ここにfooterが来る
&copy;xxxxxxxxxxxx ALL RIGHTS RESERVED.
</div><!-- END footer -->

</div><!-- END outline -->
</div><!-- END outlinebg -->
<div id="hooterbg"></div><!-- END hooterbg -->
</body>
</html>

いつでも使えて便利な「clear: both;」単独のクラス指定

今回の場合は、全体のベースとなるレイアウトなので「clear: both;」を「footer」ボックスに指定した。
本文中のレイアウトでは、「float:」を頻繁に使うはず（写真とテキストを回り込ませる等）。そこで、base.cssに「clear: both;」の指定を独立させて作っておくと便利。「float:」を使った直後にこれを呼び出しておけば、間違いは起きない。
下記のようなcssを作っておく。
.c-both { ←名前は何でもいい
clear: both;
}
これを、下記のようにHTML上で呼び出して使用する。。
<p>
<img src="xxx.gif"style="float:right;  margin-left:5px;" /> ←例えば、直前にfloat:を使ったら、
texttexttexttexttexttexttexttexttexttexttext
</p>
<div class="c-both"></div> ←直後に、このように空のボックスを使って呼び出し、float:の影響を断つ。
ページの最上部へ