06. フッターの作成と調整をして完成｜レイアウト講座

06. フッターの作成と調整をして完成

最終更新：2010年1月17日 15:43

2カラムっぽくなりだいぶ形になってきました。
次は、メインの横に流し込まれてしまっているフッターを調整します。

フッターの作成

フッターのスタイルはヘッダーと同じく「module.css」に書いていきます。

/* --------------------------------------------------------
  #footer
-------------------------------------------------------- */
#footer {
  clear: both;
  width: 830px;
  margin-bottom: 15px;
  padding: 15px;
  background: #2e69ab;
}

#footer .copyright {
  text-align: center;
  color: #fff;
}

このフッターで一番のポイントとなってくるのがclearプロパティの指定です。この指定をする事で、フッター部分が横に流し込まれずメインの下に表示されます。

全体の横幅は860pxですが、フッターは830pxと指定しているのは、左右パディングの15pxが足されて実際には890pxとなってしまうからです。
また、一見widthプロパティの指定はいらないように見えますが、指定が無いとIEで不自然な上パディングができてしまいます（zoomプロパティでも対応出来ます）。

これで、フッターまで完成しました。もう一息で完成です。

#contentsの作成

順番的に、メインとサブを作っているタイミングでも良かったんですが、実際に組んでいるとそんなに効率よく書けなかったりして#contentsが後になり、その後さらにメインとサブを調整したりするんでここに来て#contentsの作成に入ります。

最初に見た完成形にするために、#contentsに必要な指定をします。

/* --------------------------------------------------------
  #contents
-------------------------------------------------------- */
#contents {
  float: left;
  width: 830px;
  margin-bottom: 15px;
  padding: 15px;
  background: #2e69ab;
}

ここで重要なのはfloat: left;とwidth: 830px;の指定です。特にfloatプロパティの指定が大切で、この指定が無いと背景色が表示されなくなってしまいます。

これらの指定をした状態を実際のブラウザで見ると以下のようになり、ブラウザによって表示が異なってきます。

ここまでのサンプル

このままでは当然ダメなので、メインとサブの調整をします。

/* --------------------------------------------------------
  #main
-------------------------------------------------------- */
#main {
  float: left;
  width: 515px;
  padding: 15px;
  background: #fff;
}

/* -----------------------------------------------------------
  #sub
----------------------------------------------------------- */
#sub {
  float: right;
  width: 270px;
  color: #fff;
}

この調整で、2カラムレイアウトは完成です。

調整したサンプル

メイン内の作成

メイン内の各要素にスタイルを当てます。

#main table,#main ol,#main ul,#main dl,#main blockquote,#main pre,#main p {
  margin-bottom: 10px;
}

#main .pageTop {
  clear: both;
  margin: 0;
  text-align: right;
}

#main h2 {
  margin: 0 0 10px;
  padding-bottom: 3px;
  border-bottom: 5px solid #2e69ab;
  font-size: 120%;
}

#main h3 {
  margin: 30px 0 10px;
  padding-left: 5px;
  border-left: 5px solid #2e69ab;
  font-size: 110%;
}

これで、ほぼ全てが完了です。

おまけの角丸

最後にちょっとしたおまけとして、CSS3を使って角丸を作成します。

/* --------------------------------------------------------
  角丸
-------------------------------------------------------- */
#header,
#footer,
#contents,
#main {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

border-radiusプロパティの指定をすることで、Firefox3～、Safari3～、Chrome辺りで見た場合に指定された要素の角が丸くなってくれます。
情報に支障を与える訳ではないので、個人サイト等なら使っていけるプロパティかと思います。
ちなみに、Operaは10.5、IEは9で対応予定っぽいです。
角丸の詳細に関しては「border-radiusプロパティ」でご確認ください。

何はともあれ、以上で全て完成となります。
お疲れさまでしたっ！

あとがき的な

分かってる人からすると非常に簡単なサンプルでしたが、書いてて思うのは実際にこのレイアウトから説明が必要な人は、この説明でどの程度分かってもらえるのか。もしくは、説明が冗長過ぎてかえって分かり難いのか...等々色んな課題が残ります。
感想等有ればくださいませ。

05. メインとサイドを2カラムに