cssを直してみよう
id:kiyohero:20051028:1130487094のCSSを直してみる。
元ネタはid:Yuichirou:20051029#1130558256のツッコミから。
俺が書き直すと以下。同じCSSでも書き方が変わってくるので、色んな人が書き直すといいと思いました。あの人とかあの人とかあの人とか。
書き換え後のCSS(コメント付き)
/* ---------- 基本要素 ---------- */ body { font-family: verdana,sans-serif; margin: 10px 0px 0px; /* この書き方は人それぞれ. 0にも単位を付ける派なのでpxを付ける. div.adminmenuがぴったり張り付いているので, 上から10px程空けた方が良いと思われる. */ color: black; background-color: white; } a:link { color: blue;} a:visited { color: purple;} a:hover { } a:active { color: red;} img { border: none; /* 全てborder: none;だったので, 纏めてやってしまう. */ } a.keyword { text-decoration: none; color: black; } a.keyword:hover { border-bottom: black solid thin; } /* ---------- 2 columns ---------- */ div.main { margin: 0px 100px 0px 320px; /* 幅固定する必要が感じられないので, リキッドレイアウトに変更 */ } div.sidebar { width: 200px; position: absolute; top: 10px; right: 100px; } /* ---------- main ---------- */ h1 a { text-decoration: none; } div.day a.edit { font-size: small; color: gray; text-decoration: none; } span.timestamp{ font-size: small; } div.day pre{ font-size: small; font-family: monospace; /* preはなるべく等幅で */ margin: 10px 20px; padding: 10px 15px; background-color: #B0E2FF; } /* ---------- 特殊なもの ---------- */ /* borderを設定しない以上, marginでもpaddingでも変わらない */ /* 幅を決めていないのでどちらでも良し */ div.append { font-size: small; margin: 20x 0px; } div.append a { color: black; text-decoration:none; } /* #montaの場合, もんたメソッドを二度と使わないと取れるので, .montaに変更 */ .monta a.keyword { color: black; background-color: black; } .monta a.keyword:hover, .monta a.keyword:visited { color: black; background-color: white; }
htmlの方でdiv.appendも周りに合わせてしまった方が管理が楽かと.
<div class="hatena-module" id="append"> <div class="haetna-moduletitle">適当なタイトル</div> <div class="hatena-modulebody"> <ul> <li><a href="#">はてなアンテナに追加 <img...></a></li> <li><a href="#">この日記のRSSフィード <img...></a></li> <li><a href="#">この日記を含むブックマーク <img...></a></li> </ul> </div> </div>
元のcss
h1 a { text-decoration: none; } h1 img { border: 0; } #monta a.keyword{ background-color:#000000; } #monta a.keyword:hover,#monta a.keyword:visited{ background-color:#FFFFFF; } body{ font-size: 16px; font-family: verdana; margin: 0 100 0 100; } a.keyword{ text-decoration: none; color: #000; } a.keyword:hover{ border-bottom:#000 solid thin; } div.day a.edit{ font-size: small; color: gray; text-decoration: none; } div.main{ width:550px; margin-right:15px; } div.sidebar{ width: 200px; position: absolute; top: 10px; left: 650px; margin-left:15px; } div.append{ font-size: 12px; padding: 20 0 20 0; } div.append a{ color:#000; text-decoration:none; } span.timestamp{ font-size: 10px; } div.day pre{ font:14px verdana; margin:0 20 0 20; padding:10 15 10 15; background-color:#B0E2FF; } div.day img.hatena-fotolife{ border:0px; } div.body { clear: both; }