CSS再構築(その六) サイドバーの中を整へる

サイドバーの中は、見てわかる通りほとんどul要素で構成されてゐる。また、細かい構造に特徴がある。

• カレンダー:calendar2モジュール(はてな提供)
• 話題別インデックス:手作りリスト
• 最新タイトル五日分:sectionモジュール(はてな提供)
• テンポラリ:手作りリスト
• 最近の画像:photoモジュール(はてな提供)
• 管理情報:手作りリスト

狙つたわけではないが、はてな提供の便利なモジュールと手書きのリストが交互に混在してゐる。ともあれカレンダー以外はすべてulで記述されてゐるので、それを前提にスタイルを設定することにしよう。

div.infobar h2 { 
    color:#ff3 ; /* 文字色 */
    font-size:80% ; /* フォントのサイズ */
    border-color:#ff0 ; /* 下線の色 */
    padding:0.25em 0 ; /* 内側上下の余白 */
    }
 
div.infobar ul {
    font-size:80% ; /* フォントのサイズ */
    list-style-type:none ; /* 箇条書きのマークを消す */
    margin:0 ; /* 外側余白 */
    padding:0 ; /*内側余白 */
    }
 
div.infobar li ul { 
	margin:0 0 1em 0.5em ;  /* リストの入れ子の下げ幅 */
	font-size:100% ; /* 文字サイズを上位の要素に揃へる */
}
 
li.index { 
    border-bottom:1px #990 solid ;  /* 手作りのリスト項目に下線表示 */
    }

中見出しのh2要素もここでは小さな文字に設定するが、2px幅の下線だけはアイデンティティとして守ることに。特別なクラス名を与へなくとも、div.infobar h2 { と続けて書けばinfobarの中の見出しが変るのは昨日も書いた通りだ。結局のところ、基本書式のh2要素はヘッダの一つだけしか登場しないことになるが、それは気にしない。
同様にul要素を設定してゐる部分は問題ないとして、次のdiv.infobar li ul { がやや面倒な部分だ。li要素に続いて登場するul要素、つまり入れ子となる部分の設定である。少し字下げをしつつ、文字サイズを100%として上位のリスト要素と同じ大きさを保つ様にしてゐる。かうしないと、div.infobar ul で設定したfont-size:80%がこちらにも効いてしまひ、文字がどんどん小さくなつてしまふ。こんな細かい設定をするからスタイルシートがどんどん大きくなるのだが、まあ仕方ないところだ。
なほ、リストの入れ子部分でInternetExplorerのみ妙な余白が空いてしまふが、こんなローカルな以下略。ともかくこれで手作りリスト部分はよしとしよう。サンプル文書8。