Rain Dragon Project のページを作っていると、どうも引っかかるのがページデザインで、左側メニューから離れられないのだ・・・
とはいっても、この日記もそうだが、半分ぐらいが左側メニューな気がする(ぁ
左側メニューの利点は、Left-to-Right な日本語では*1そもそも見やすいということ。
そして、大量のメニューを入れることができるというのもこの利点の1つであり、メニューのひとつひとつの項目名が長くてもいいのも便利。
上側メニューのページとしては、例えば、
- Ask.com Web Search
- MSN Japan
- Amazon.co.jp： 通販 - ファッション、家電から食品まで【無料配送】 (旧ページ)
- Wikipedia などで多い「もくじ」→「本文」スタイル
(検索サイトの場合はその方が見やすいというのも納得できる)
上側の場合はスペースを確保しにくい欠点がある(下に本文がくるため、本文を読むためにスクロールしなければいけないことがある)
まあ、最後のような難い文章の場合は別だけど。
右側メニューのページは例えば、
がある。
Left-to-Right な日本語だと、一般的には見にくくなりやすいので、少々工夫する必要があるのが難点。
はてなダイアリーのテンプレートデザインにも右側メニューのデザインはたくさんある。
というわけで、とりあえず、上側に持っていきたいかなっていうのはあるんだが、ページ本文はできるだけクロススタイルシート(自由なスタイルを適用できるよう)にしたいので、上側に並べる時、テーブル(表)にすることができない(表にすると方向が決められてしまう)。
そこで、リストを使わなければならないのだが、リストで横に並べるには inline を使わなければならない。しかし、ざんねんながら、幅の設定は無視されるので、幅(もちろん、高さも)は設定できない*2。
悩んでいたが、ついに、
のページを発見。
この文章から CSS 2.1 で display に inline-block が追加されたことがわかる。
というか、display に設定できる項目ってかなり多いんだね*3
- Visual formatting model (仕様ページ)
inline-block を指定すると、形が inline でありながら width とかを設定できるシロモノに化けるということだ。
2階層メニューとかだと table-col(1階層目の ul に) + table-row(2階層目の ul に) + table-cell(li に) すればいいのかも(試してない・・・というか table の項を見よと書いてある)
ちなみに逆に li じゃないものを li にする list-item もある (XML とかで使える)
こうやってみると、CSS は奥が深いですなぁ・・・
