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;
}