チュートリアル - ディレクトリサイト開発支援ツール/CustomDir

段組の基本

縦長の広告領域をページの右側に貼り付ける時等、ページの構成要素を横に並べる必要があります。これを「段組」、または「マルチカラムデザイン」等と言います。従来段組は <table> タグを利用して行われる事が多かったように思えます。しかし、<table> タグを段組のレイアウトに利用すると、アクセシビリティの低下を招くという理由で W3C から利用を控えるようにと勧告が出ています。

W3C が勧告を出したからと言って、今後一切レイアウトのために <table> タグを利用してはならないという事はありません。また、<table> タグを利用したレイアウトには、これから説明するスタイルシートを利用したレイアウトには無い良い点が少なからずあり、必要としている人が大勢居るのも事実です。しかしせっかくですから、スタイルシートを利用して段組に挑戦してみましょう。ここで紹介する方法は、広告の貼り付けに限らず、ブラウザの左右にメニューを貼り付ける場合等にも有効なテクニックです。

これから作成しようとするページの構成は以下のようになります。

**ページの構成図**
ページヘッダー部分 (ロゴ、カテゴリー名等)
コンテンツ (カテゴリー一覧、サイト一覧等)	広告
ページフッター部分(コピーライト)

このような段組を実現するためには、float、および clear というスタイルを利用します。float は指定されたタグの表示位置を決定するスタイルで、left を指定すると左端に、right を指定すると右端に張り付き、このタグに続く文章は floatが指定されたタグを回り込みます。そして clear が指定されたタグまで回り込みは継続します。clear は、値として left (左側の回り込み解除)、right (右側の回り込み解除)、both (左右両方の回り込みの解除)が指定できます。

float、clear の性質を利用すると、段組をスタイルシートで表現できます。今回の場合は、コンテンツの領域を広告の領域に回り込ませてやれば良いのです。ただし、回り込みを指定する時はそれぞれのタグの横幅を指定してやらないとうまくいきませんので、コンテンツ領域と広告領域をそれぞれ <div> タグで括ってやります。また、全体の横幅も指定してやる必要があるので、すべてのタグを総まとめにして括るタグが必要になります。さらに実験中分かりやすいように、背景色を付けてみる事にしました。

ここまでをまとめると、記述するタグは以下のようになります。サンプルページも参照して下さい。


<div style="width:768px;margin:0px;padding:0px">

  <div style="background:#c0ffff;">

    ヘッダー領域

  </div>

  <div style="float : left;width : 640px;background : #ffc0ff">

    コンテンツ領域

  </div>

  <div style="float : left;width : 128px;background : #ffffc0">

    広告領域

  </div>

  <div style="clear : left;width : 768px;background : #c0ffc0">

    フッター領域

  </div>

</div>

ここでは実験用に分かりやすくするため style 属性の中に直接スタイルを記述しました。実際には class 属性を指定し、別ファイルに記述します。