CSS によるレイアウトの考察

はじめに

このドキュメントは,筆者が,CSSによるレイアウトの方法を考察したものである.この内容は正しいものではなく,筆者の考えによるものである.

このドキュメントのデザインにおいて,背景の方眼は1目盛り10pxである.また,bodyの周囲に枠線を引いている.それ以外のドキュメントのデザインは定義していない.

動作確認は,WindowsXP, 画面サイズ1280px×1024px,IE6,Netscape 4.79(en), Netscape 7.2(en), Firefox 1.0 preview, Opera(ja) 7.53で行い,NN 4.79 以外のブラウザで,ほぼ同じ表示であることを確認した.NN4.78 は,ほとんど作成者の意図した通りに表示されない.

1. ブロックを中央に配置する

ブロック「div」は,デフォルトでは,左寄せとなる.ブロックの幅を60%に設定したとき,div要素は次のように表示される.

これを中央に表示するには,左右のマージンがそろえばよい.左右のマージンの幅の設定にautoを使う.

ブロックの左側に30%に余白,右側に10%の余白を作りたい場合は,そのままその値を指定する.余白とブロック幅の合計は100%とならなければならない.

2. ブロックを横に並べる

通常ブロックは,横に並べることができない.そこでいくつかの代替的な方法を考える.

ブロックを横に並べることを,しばしば「段組」と呼ぶことがあるが,段組とは,新聞のように,並んだブロックの文章がつながっているものを指す.ここでは,それぞれのブロックは独立した文章を持つレイアウトについて考える.

2-1 tableを使う

tableを用いると簡単に,ブロックを並べることができる.

  • 幅がbodyの幅の60%のブロック
  • 幅がbodyの幅の60%のブロック
  • 幅が上のブロックの幅の40%のブロック
  • 幅が上のブロックの幅の40%のブロック
  • 幅が上のブロックの幅の60%のブロック
  • 幅が上のブロックの幅の60%のブロック
  • 幅が上のブロックの幅の60%のブロック
  • 幅がbodyの幅の60%のブロック
  • 幅がbodyの幅の60%のブロック

この方法は,様々なブラウザで作成者の意図したとおりの表現が得られるため,レイアウトにtableが使われるケースが多い.

しかしながら,table要素は表組みのためににのみ使われるべきである.また,アクセスシビリティや,検索エンジンの関係から,この方法は望ましくないとされている.

2-2 floatを使う

CSSではfloatと呼ばれる命令がある.これは,回り込みと呼ばれ,ブロックの隙間に要素を流し込む命令である.しばしば図の挿入に用いられる.

#

この命令では,ブロックの線幅のため,中段右側が多少はみ出ることに注意したい.また,Netscape 4では,全く意図しない表示となってしまう.

floatを使用しているので,clear:leftを命令しなければならないが,他のCSSと併用すると,Mozillaでは,floatが解除されないことがわかった.

また,画面サイズ・ブラウザによって,中段のブロック下部が不揃いになる.これは,height で修正が可能であるが,絶対単位 px を使うことは好ましくない.ユーザー側の環境によっては崩れてしまうからである.

CSSによるレイアウトの作成では,classの代わりにidが用いられることがある.idはページ内で「唯一」のタグを指し示すものであり,同じidをもつタグはほかに存在しない.レイアウトで使用するタグは1個しか登場しないからidタグを使うという理由からだろうが,「唯一」という意味での使い方をしていない.他のページでも同じレイアウトを使うならば,サイト内に「複数」のidが存在することになる.レイアウトにおいてもidではなくclassを使うべきである.

画面サイズを最大にすると,おそらく,右のブロックの方が長くなるだろう.また,ブロックの性質より,独立で2つ並べることは望ましくない.そこで,大きなブロックをつくり,その中に2つのブロックを格納するとよいだろう.

#

この命令では,枠線の幅分,中段のブロック幅を小さく設定しなければならないことに注意したい.

floatは余白部分にテキストを流し込むものなので,画面サイズによっては,右のブロックが下に流し込まれる場合がある.また,テーブルによるレイアウトをタブの目的と異なる使い方をしているので推奨しないとするならば,この方法を使うことはやはり望ましくない.

2-3 position:absoluteを使う

ここでは,absoluteを使ったレイアウトを考えてみる.

#

このように,下段のブロックが完全に隠れてしまう.これを回避するためには,heightの値を与えなければならない(ここでは、height:5exを指定している).ただしpxのような絶対単位を用いることは勧められないため,この問題を回避するすべはない.exのような相対単位を用いることは可能であるが,画面サイズによって行数が変わるため明示的に値を入れることはできない.

まとめ

ブラウザをUA(ユーザーエージェント)と呼ぶように,閲覧者側にデザインを任せるという姿勢ならば,絶対単位は使用できない.それゆえ,position:absolute は使用できない.

また,本来の目的とは異なるfloatを使用することが許されるならば,tableによるレイアウトも許されるべきである.

逆に,論理的構造を重視するならば,position:absolute を使用すべきであるが,相対単位の指定は,ブラウザによって作成者の意図しないデザインとなるため使用することができない.

よって,これらをまとめると次の通りとなる.

  1. 作成者の意図したとおりの表示を望むならば,position:absolute
  2. アクセシビリティや検索エンジンを重視し,論理構造を気にしないならば,float
  3. 複雑なことは気にせず,レイアウトを組みたいならば,table

Back (T) / Home (X)