罫線付きにしてみたり

css

hatenaのスタイルのnoteを元に、罫線付きの表示に挑戦。
基本的には、

div.section {
background-image:
}

に罫線の画像を指定して、背景を罫線状にし、そのサイズに合うようにフォントサイズ・行高・マージン等を設定するのでＯＫなのだが・・・

こういうblockquote

だったり

こういうpre

が入るとずれる（当然）
従って、これらも微調整をかまさないといかんのだけど、何せへっぽこなので
全然上手くいかないのよねー。やはり勘で書いてちゃダメだね^^;


と思ったらIEの時点で既にずれているわけね^^;くそー。。。


追記：
色々調べて、一応出来ましたかな？

div.section {
background-image: url(under_line.gif);
margin: 0.5em 0em 0.5em 0em;
padding: 0em;
font-size: 12px;
line-height: 16px;
}
div.section p {
padding: 0em 1em 0em 1em;
margin: 0em ;
}

通常の表示div.sectionにbackground-image:を指定(16x16で一番下のみ線が書いてあってそれ以外は透明なgif）
font-sizeは 12px（小さい時が好き）line-heightはgifの大きさと同じ16px

div.section blockquote {
margin: 9px 2em 9px 2em;
padding: 6px;
font-size: 12px;
line-height: 16px;
}

blockquote は 上下のマージンを 9pxづつ。内部のpaddingを6pxにして、font-size, line-height はsectionと同じ(という事は指定する必要ないのか？)

div.section pre {
margin: 10px 2em 10px 2em;
padding: 6px;
font-size: 12px;
line-height: 16px;
}

pre はボーダーを引かない分 上下のマージンを10pxにした。
とりあえず、IEとOPERAだとＯＫだねー。うふふ。でもちょっとごみごみしてる？
line-heightを18にするかなー・・・


さらに変更

  1. 画像のサイズを 16→18に
  2. line-heightを18pxに
  3. blockquote/preからfont-size,line-heightを削除(div.sectionと共通)
  4. blockquoteのmarginを10px,paddingを7pxに変更
  5. preのmarginを11px,paddingを7pxに変更