CSS実験室 1

CSSで自由自在レイアウトを目指して

すべての TABLE を非難するのもどうかと思うけど、TABLE を使わずに済むなら使わないでレイアウトをやってみたいなぁと思うのが人情。へー、CSS が使えるなんて、なんかカッコイイじゃんてのが見栄。まぁその両方が入り混じって CSS でレイアウトやってみようと思うわけです。あれこれ調べたらCSS でのレイアウトをするときにいちばん基本となるのは

要素はボックスを形作る

ということのよう。で、レイアウトとはそのボックスをどう扱うかなのですな。ということは、TABLE を使っていたときと、基本的には大きな違いはないのです。あとは CSS を使ったときのクセのようなものに慣れるだけ。

さ、まずはボックスを目の当たりにしてみよう。

P ボックス

通常の見た目	ボックスの border を表示している例
ここは P ボックス	ここは P ボックス
ここは P ボックス	ここは P ボックス
ここは P ボックス	ここは P ボックス
（display: inline; text-align: right;）	（display: inline; text-align: right;）
ここは P ボックス （複数行）	ここは P ボックス （複数行）
ここは P ボックス （display: inline;）	ここは P ボックス （display: inline;）
ここは P ボックス （display: inline;）	ここは P ボックス （display: inline;）

• Pボックスの期待した表示

P ボックスが

• ブロックレベル要素であり、ほっとけばいっぱいいっぱいの横幅を使い切るようになっていること、
• そのおかげで右寄せやセンタリングなどの効果を掛けることができること、
• そしてこの表示を display: inline; に変更すると右寄せなどは無効になること

が分かる。

また、P ボックスの前後（というか上下）に余白（margin）がセットされていることも分かる。display: inline; のときはブロックレベルの表示ではないので余白は設定されない。

リストボックス

通常の見た目	ボックスの border を表示している例
List Item 1 List Item 2 List Item 3	List Item 1 List Item 2 List Item 3
Item Comment 1 Comment 2	Item Comment 1 Comment 2

• リストボックスの期待した表示

ul のボックスがあり、li のボックスがその中に入っている。li の前の記号は li に付随しているもので、左側の‘空き’は ul ボックスではなく、ul ボックスとその中の li ボックスの間のものであることも分かる。（ただし、この空間が ul に指定された padding によるものか、li に指定された margin であるかは分からない。）

下の dl, dt, dd の場合は dd の左側にだけ余白があるので、この場合は dd の左に margin が設定されているのだろう。

フローティング

通常の見た目	ボックスの border を表示している例
このボックスが先に出てくる要素です。普通に表示されているはずです フローティングは何らかのボックスが右や左に寄り、後続の要素をその反対側に回り込ませるものです。	このボックスが先に出てくる要素です。普通に表示されているはずです フローティングは何らかのボックスが右や左に寄り、後続の要素をその反対側に回り込ませるものです。
このボックスが先に出てくる要素です。右寄りに表示されているはずです フローティングは何らかのボックスが右や左に寄り、後続の要素をその反対側に回り込ませるものです。	このボックスが先に出てくる要素です。右寄りに表示されているはずです フローティングは何らかのボックスが右や左に寄り、後続の要素をその反対側に回り込ませるものです。
このボックスが先に出てくる要素です。右寄りに表示されているはずです フローティングは何らかのボックスが右や左に寄り、後続の要素をその反対側に回り込ませるものです。	このボックスが先に出てくる要素です。右寄りに表示されているはずです フローティングは何らかのボックスが右や左に寄り、後続の要素をその反対側に回り込ませるものです。
このボックスが先に出てくる要素です。右寄りに表示されているはずです List Item 1 List Item 2 List Item 3	このボックスが先に出てくる要素です。右寄りに表示されているはずです List Item 1 List Item 2 List Item 3

• フローティングの期待した表示

フローティングはブロックレベル要素の中での text-align による右寄せ左寄せとは違い、後続の要素のレンダリングに影響を与える。

また、後続の要素の回り込み方は、「内容」のテキストは回り込むが、ブロックレベルのボックスそのものは回り込まない。したがって border を表示させるとフロート化している要素が後続の要素の枠をはみ出しているように見える。

li は display: list-item; であり、mozilla 0.9.8 では block とも inline ともつかない表示方法になる。IE 5.5 は単に list-style のついたブロックレベル要素として捉えているような感じだ。

position プロパティは使える？

HTML の TABLE でのレイアウトはよくないテクニックとしてよく叩かれている。では、これに代わるレイアウト手段は本当に使えるのか？ この配置に使えるのは position プロパティである。これには3種類ある。

• position: relative
• position: absolute
• position: fixed

これらの指定を行ったうえで、実際のポジショニングは top: bottom: left: right: などのプロパティを使って行う。ただし、position プロパティによってこの指定に使う基準の座標が変わる。（position: static もあるが、これは通常の配置を行うという意味だけの宣言である。）

まずは簡単な position: relative から

通常の見た目	ボックスの border を表示している例
段落１。これが最初の段落。 段落２。これを position で移動させる。狭くしてあるのは効果を分かりやすくするため。 段落３。この段落が position の影響をどう受けるのか？	段落１。これが最初の段落。 段落２。これを position で移動させる。狭くしてあるのは効果を分かりやすくするため。 段落３。この段落が position の影響をどう受けるのか？
position: relative; left: 5em; top: -3em; 段落１。これが最初の段落。 段落２。これを position で移動させる。狭くしてあるのは効果を分かりやすくするため。 段落３。この段落が position の影響をどう受けるのか？	position: relative; left: 5em; top: -3em; 段落１。これが最初の段落。 段落２。これを position で移動させる。狭くしてあるのは効果を分かりやすくするため。 段落３。この段落が position の影響をどう受けるのか？

• position: relative の期待した表示

position: relative; を使ってボックスを動かすと

• もともとそのボックスが現われるはずの場所からの相対的な位置に
  • top: left: などの特性を使ってそのボックスがスライドされる
• もともとそのボックスのあった場所は「何もない空間」になる
  （フローティングのように後続の要素が「詰めて」くることはない）

単純に考えるとこの position: relative だけでは他の要素との関係があまりうまく処理できないように思う。つまり、本格的なレイアウト手段としてはあまり面白くないってこと。

position: fixed については、Netscape 6 / mozilla などのように CSS 対応の進んでいるブラウザでご覧の方はお気づきでしょうが、このページのウィンドウの最下部にメッセージが固定されておりますが、これはこの文の次に書かれている要素です。

この文は本当はウィンドウ最下部に固定表示されているものです。

この位置の指定の基準は position: absolute と同じで、position: absolute の場合は「包含ブロック」の理解が必須。この辺は「position: absolute サンプル」で詳しく見るのでそちらへどうぞ。