5.6. 仕上げ

5.5まででWebページの個々の部分に装飾を施しました。この6.6では完成した部品をレイアウトしてみます。レイアウト方法には大きく二つあります。

5.6.1. floatプロパティを使う

まずはfloatプロパティを使うレイアウト法について解説します。floatは指定された要素のボックスを左右どちらかに寄せて、後続の要素のボックスをその反対側に流し込むプロパティです。ただ、説明だけしてもよくわからないと思うので、実際にやってみます。前回までのCSSファイルに以下のように書き加えてください。

#menu{
float:left;
}
#contents{
float:right;
}

menuを右にcontentsを左に配置
図5.25. フロートを利用して各パーツを配置

このままだとメニューは左に寄りすぎで、コンテンツは右に寄りすぎです。marginを調節して修正します。

#menu{
float:left;
margin-left:30px;
}
#contents{
float:right;
margin-right:50px;
}

左右のマージンを調節しボックスのを中心に寄せた
図5.26. マージンを調節して横位置を修正

さらにタイトルとメニュー・コンテンツの間隔を調節するためにmargin-topを設定します。

#menu{
float:left;
margin-left:30px;
margin-top:20px;
}
#contents{
float:right;
margin-right:50px;
margin-top:20px;
}

サイトタイトルとその他のボックスの間隔を空けた
図5.27. サイトタイトルとの間隔を調節

これでfloatプロパティを使ったレイアウトは完了です。ポイントとしてはfloatプロパティは設定した要素をどちらに寄せるか決めるものだというところです。さらにこの方法はfloatを指定する要素に対して、幅(width)を決めていないと上手くいきません。floatを使ってレイアウトする時は要素にwidthプロパティを指定するのを忘れないでください。

サンプル：sample6_6_1.zip

5.6.2. positionプロパティを使う

続いてpositionプロパティを使ったレイアウト法について解説します。positionプロパティは該当ボックスの配置方法を指定するプロパティです。値はrelative、absolute、fixedをとります。relativeは普通に配置したあとで位置をずらします。つまり現在の表示位置が基準になります(相対配置)。absoluteは絶対配置、すなわち現在の表示位置とは関係なくある地点を基準に配置します。基準については色々とややこしいので、とりあえずposition:absolute; top:0; left:0;と指定して基準がどこなのか確認するといいでしょう。ただ、ページの左上隅が基準になることが多いです。fixedは基本的にabsoluteと同じです。ただ配置すると表示位置がその場所に固定されます。スクロールしても常に表示されるメニューなんてことに利用出来ます。

早速やってみます。まずは相対配置から。relativeを指定します。

#menu, #contents{
position:relative;
}

見た目上は変化無し
図5.28. position:relativeを指定

特別変化はありません。続けて表示位置の調節をします。これにはtop、right、bottom、leftの4つのプロパティを使用します。これらのプロパティはpositionプロパティでrelative、absolute、fixedのいずれかを指定した要素にしか機能しないので注意しましょう。早速使ってボックスの表示位置を調節します。

#menu, #contents{
position:relative;
}
#menu{
top:20px;
left:30px;
}
#contents{
top:-80px;
left:220px;
}

フロートレイアウトと同じような位置になるよう調節した
図5.29. 表示位置を調節。

このようにtop、right、bottom、leftの値には負の値も指定出来ます。

次にposition:absoluteを指定した場合の例を示します。まずはpositionプロパティを指定、さらにtop:0、left:0と指定して、配置の基準を確認します。

#menu, #contents{
position:absolute;
top:0;
left:0;
}

ページの左隅が基準になっている
図5.30. 配置の基準を確認する

ページの左上が基準のようです。続けて表示位置を調節します。ここからはrelativeの場合と同じです。基準からどう動かしたいのかを指定すればOK。

#menu, #contents{
position:absolute;
top:120px;
}
#menu{
left:30px;
}
#contents{
left:220px;
}

相対配置と似たような位置に表示した
図5.31. 表示位置を調節、配置を決定する

下のサンプルは絶対配置した場合のものです。上の解説を参考に各パーツの表示位置を色々変えてみてください。

サンプル5.6.2：sample5_6_2.zip

この5.6まででとりあえずはWebページが作れるようになったと思います。これまで紹介したプロパティはCSSのほんの一部です。もっと知りたいなと思ったら、リファレンス等を参考に理解を深めてください。また、他の人が書いたHTMLやCSSを参考にするのもよい勉強になります。「これカッコイイな」とか「キレイだな」と思ったらソースを覗いてみるといいと思います。きっと参考になるはずです。