ページの枠組みを作る
実践的なサンプルページの作成方法について解説
ポイント
- floatを指定された要素は左または右に寄せて配置され、後続の要素はその反対側に回り込む
- floatを指定した要素は親要素の高さとは無関係になり、親ボックスからはみ出す
- floatを指定した要素全体を含むように親要素を拡張するには、clearfixを使用する
- clearfixの代わりとしてoverflowやfloatを使用することもできる
- 各カラムの高さが揃っているように見せるには、全カラムが含む要素に背景画像を指定する
- 他の要素には一切影響を与えず、元の位置からずらすのが相対配置
- 元あった場所から取り除いて、別レイヤーで表示させるのが絶対配置
- 相対配置または絶対配置されボックスは、その内部で絶対配置をする際の基準ボックスとなる
１、実践的なページの枠組みを作る
body要素の内容は「header」「content」「footer」の３つに大きく分かれており、それぞれの内容はさらに「class=”inner”」が付けられたdiv要素で囲われています。「content」の内部には「main」と「sub」があり、この部分がマルチカラム（２段組み）となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>floatプロパティ</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="header">
<div class="inner">
<div id="logo">
<a href="#"><img alt="sample site" src="images/logo.png" width="234" height="80"></a>
</div>
<div id="mainvisual">
<img alt="sample site" src="images/mainvisual.png" width="800" height="300">
</div>
</div>
</div>
<div id="content">
<div class="inner">
<div id="topicpath">
<a href="#">ホーム</a>>お知らせ
</div>
<div id="main">
<h1>サンプルの大見出し</h1>
<p>
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
</p>
<p>
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
</p>
</div>
<div id="sub">
<h2>お知らせ</h2>
<ul id="localnav">
<li><a href="#">2024年5月（7）</a></li>
<li><a href="#">2024年6月（15）</a></li>
<li><a href="#">2024年7月（2）</a></li>
<li><a href="#">2024年8月（3）</a></li>
<li><a href="#">2024年9月（10）</a></li>
<li><a href="#">2024年10月（12）</a></li>
<li><a href="#">2024年11月（4）</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div class="inner">
<ul id="footnav">
<li class="first"><a href="#">サイトのご利用にあたって</a></li>
<li><a href="#">プライバシーポリシー</a></li>
</ul>
<p id="copyright">Copyright © 2024 sample site. All rights reserved.</p>
</div>
</div>
</body>
</html>外部スタイルシートのファイル「styles.css」の内容
１行目にある「@charset “utf-8”;」は、この外部スタイルシートの文字コードが「UTF-8」であることを示すための書式です。
@charset "utf-8";
/* ページ全体の枠組み
ページ全体に対する表示指定及びページ全体の枠組みに関連する指定を記載します。
-------------------------------------------------------------------------------------------*/
/* リンクと画像
ページ全体のリンクに関連する指定はここに書き込みます。
-------------------------------------------------------------------------------------------*/
/* ヘッダ
「#header」の内部に対する指定はここに書き込みます。
-------------------------------------------------------------------------------------------*/
/* トピックパス（パンくずリスト）
「#topicpath」の内部に対する指定はここに書き込みます。
-------------------------------------------------------------------------------------------*/
/* メインコンテンツ
「#main」の内部に対する指定はここに書き込みます。
-------------------------------------------------------------------------------------------*/
/* サブコンテンツ
「#sub」の内部に対する指定はここに書き込みます。
-------------------------------------------------------------------------------------------*/
/* フッタ
「#footer」の内部に対する指定はここに書き込みます。
-------------------------------------------------------------------------------------------*/@charset "utf-8";
/* ページ全体の枠組み
ページ全体に対する表示指定及びページ全体の枠組みに関連する指定を記載します。
-------------------------------------------------------------------------------------------*/
body{
margin:0;
padding: 0;
border-top: 5px solid #699600;
font-size: 13px;
color: #666666;
background: #699600;
}
#header{
height: 423px;
background: url(images/headbg.png) repeat-x;
}
#header .inner{
margin: 0 auto;
width: 800px;
}
#header .inner{
position: relative;
height: 423px;
}
#logo{
position: absolute;
top:0;
left: 0;
}
#mainvisual{
position: absolute;
top: 123px;
left: 0;
}
#content{
background: #fff url(images/contentbg.png) no-repeat top center;
}
#content .inner{
margin: 0 auto;
padding: 15px 35px 50px;
width: 730px;
}
#main{
float: right;
width: 450px;
}
#sub{
float: left;
width: 245px;
}
#content .inner:after{
content:".";
display: block;
height:0;
clear: both;
visibility:hidden;
}
#footer{
min-height: 80px;
background: #699600;
}
#footer .inner{
margin: 0 auto;
width: 800px;
}２、ページ全体の基本設定を行う
CSSによる表示指定を書き込んでいきます。はじめにページ全体（body要素）の余白や文字サイズ・文字色を指定します。サンプルページは、ページの最上部に緑色の線が入っていますので、上のボーダーも指定します。テキストエディタで「styles.css」を開いて、次のCSSを追加します。
/* ページ全体の枠組み
ページ全体に対する表示指定及びページ全体の枠組みに関連する指定を記載します。
-------------------------------------------------------------------------------------------*/
body{
margin:0;
padding: 0;
border-top: 5px solid #699600;
font-size: 13px;
color: #666666;
}
３、#headerに背景画像を指定する
ヘッダ部分に背景画像を指定します。まず背景画像に合わせた高さ（423px）を指定し、背景画像は横に繰り返して表示させます。「styles.css」に次のCSSを追加します。#headerに表示させる背景画像「headbg.png」は図２のとおりです。指定した背景画像が横に繰り返して表示されます。
body{
margin:0;
padding: 0;
border-top: 5px solid #699600;
font-size: 13px;
color: #666666;
}
#header{
height: 423px;
background: url(images/headbg.png) repeat-x;
}
４、#headerをセンタリングする
今度はヘッダ部分の幅を指定して、センタリングさせます。幅とセンタリングの指定は、#headerではなく、その内側にある.innerに対して行います。「styles.css」に次のCSSを追加します。ヘッダ部分が中央に表示されています。
#header{
height: 423px;
background: url(images/headbg.png) repeat-x;
}
#header .inner{
margin: 0 auto;
width: 800px;
}
５、絶対配置で画像の位置を調整する
この段階では、建物の画像の縦位置がずれています。その上のロゴ画像は位置はずれていませんが、きちんとした位置指定はされていません。これらは画像なので大きさが変わることは基本的にないので、絶対位置で表示位置を指定します。ここでは、幅を800pxに固定してセンタリングしている.innerのボックスを基準ボックスにします（position:relative;を指定します）。「styles.css」の「/*ヘッダー*/」の見出しの下に、次のCSSを追加します。青空の画像と背景画像の位置がぴったりと合っています。
/* ヘッダ
「#header」の内部に対する指定はここに書き込みます。
-------------------------------------------------------------------------------------------*/
#header .inner{
position: relative;
height: 423px;
}
#logo{
position: absolute;
top:0;
left: 0;
}
#mainvisual{
position: absolute;
top: 123px;
left: 0;
}
この指定は「ページ全体の枠組み」ではなく「ヘッダ」の内部の表示指定なので、ここまでの指定とは分けて「/*ヘッダー*/」の部分に書き込みます。
６、#contentをセンタリングする
#headerと同様に#contentにも背景画像を指定してセンタリングします。背景画像には図7に示した「content.png」を使用し、繰り返しなしで上の中央に合わせて表示させます。センタリングは、#headerと同様に.innerで行いますが、幅の指定はパディングで余白をとる分だけ短くします。「styles.css」に次の指定のCSSを追加します。コンテンツ部分がセンタリングされ、背景画像も表示されます。
/* メインコンテンツ
「#main」の内部に対する指定はここに書き込みます。
-------------------------------------------------------------------------------------------*/
#content{
background: #fff url(images/contentbg.png) no-repeat top center;
}
#content .inner{
margin: 0 auto;
padding: 15px 35px 50px;
width: 730px;
}
７、#contetn内をマルチカラムにする
#contetn内に含まれる#mainと#subをfloatで横に並べてみますそして、#footerでfloatをクリアします。「styles.css」に次のCSSを追加します。#contetn内がマルチカラムになっています。
#content{
background: #fff url(images/contentbg.png) no-repeat top center;
}
#content .inner{
margin: 0 auto;
padding: 15px 35px 50px;
width: 730px;
}
#main{
float: right;
width: 450px;
}
#sub{
float: left;
width: 245px;
}
#footer{
clear: both;
} 
８、clearfixを導入する
図9をみると#contentに指定した背景が途中から消えてしまっていることがわかります。実は、#mainと#subの両方にfloatを指定しているため、これらは高さは、背景が表示されている部分までしかないということです。そこで、対策としてclearfixを使用します。「styles.css」に次のCSSを追加します。clearfixでfloatはクリアされますので、#footerの「clear:both;」は削除します。#contentの背景が表示されるようになっています。
#content .inner:after{
content:".";
display: block;
height:0;
clear: both;
visibility:hidden;
}
９、#footerをセンタリングする
フッタ部分もセンタリングする
フッタ部分もセンタリングして、背景を指定します。フッタ部分にはある程度の高さを確保したいのですが、heightプロパティを使用すると高さが固定になってしまい、ユーザーが文字サイズを大きくした場合などはボックスからはみ出てしまう可能性もあります。そこで、ここではheightプロパティではなく、最低の高さだけを設定できるmin-heightプロパティを使用して高さを確保します。「styles.css」に次のCSSを追加します。フッタ部分にも背景が表示されるようになっています。
#footer{
min-height: 80px;
background: #699600;
}
#footer .inner{
margin: 0 auto;
width: 800px;
}
１０、body要素の背景色を#footerと同じにする
図８をみると、フッタ下にbody要素の白い背景が見えてしまっています。そこで、body要素の背景色を#footerと同じにします。「styles.css」のbody要素向けの指定の最後に、次のCSSを追加します。フッタの背景色がページ最下部まで続くようになります。
body{
margin:0;
padding: 0;
border-top: 5px solid #699600;
font-size: 13px;
color: #666666;
background: #699600; ←追加
}
