186(css)

2005-05-22

[] マージンの相殺

マージンの相殺 - CSS Dencitie

いっつも忘れるのでメモ。

トラックバック - http://css.g.hatena.ne.jp/smoking186/20050522

2005-01-15

[][] 小技 - モジュール毎に色指定どころか枠まで変えてしまえ。

当初カレンダーでも出来ると思っていたがIEだけ出来なかったというオチがあったり。

<div class="sidebar">
 <div class="hatena-module">
  <div class="hatena-moduletitle">Title</div>
  <div class="hatena-modulebody">
   <ul class="hatena-antenna">
    <li><a href="#">asdfg..</a></li>
    <li><a href="#">qwery..</a></li>
   </ul>
  </div>
 </div>
</div>

という基本構造を念頭においてやってみる。実際にこういうことを実現しているテーマとしては、PictとColorlabel辺り。

ul.hatena-antennaのように、div.hatena-modulebody要素内のtable要素やul要素はクラスが指定されている。

positionやwidthを用いulをdiv.hatena-moduleより大きくしてしまう。

当初はmarginに負の値を指定していたが、これはIEの所為でぽしゃったorz

トラックバック - http://css.g.hatena.ne.jp/smoking186/20050115

2004-10-24

[] photoモジュールを弄ってみる。

ポイントは最大でも50px*50px60px*60pxという点。

  • div.hatena-modulebody
    • ul.hatena-photo
      • li
        • a
          • img

という五階層に気をつけ、どれをブロック化すると良いのかを考えながら弄ってみる。

目標は

#photo_test {
 margin:10px;
 padding:10px;
 border-bottom: 2px solid #cccccc;
 border-right: 1px solid #dddddd;
 border-top: 1px solid #fefefe;
 border-left: 1px solid #fefefe;
}

みたいに加工したものをdiv.module-body中に中央揃えで並べること。aをblock化し、widthとheightを決め打って枠線を引くと崩れにくいか?

div.module-bodyの幅は200pxとしておく。

[] 上の続き

.sidebar {
 width: 240px;
}

.hatena-module {
 width: 220px;
 margin: 10px 9px 10px 9px;
 border: 1px solid red;
}

.hatena-modulebody {
 widht: 200px;
 margin: 10px 9px 10px 9px;
 border: 1px solid blue;
}


.hatena-photo {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}

.hatena-photo li {
 display: block;
 width: 82px;
 margin: 5px 59px 5px 59px;
 background-color: #ffffff;
}

.hatena-photo li a {
 border: 0px;
 display: block;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 10px;
 background-color: #ffffff;
 border-bottom: 2px solid #cccccc;
 border-right: 1px solid #dddddd;
 border-top: 1px solid #fefefe;
 border-left: 1px solid #fefefe;
}

.hatena-photo li a img {
 border: 0px;
}

具体例。Standardモードで解釈する場合は上の通り。

後はQuirkモードで読みやがるIE,Opera等に対して調整を行う。

IEに関しては_hackか* html hack辺りでwidthの計算方法に気を使いながら指定しなおせばよい。

今度作るテーマで採用しようと思っている。

aをブロック化して、a要素で写真の枠線を引いているので、active時に背景色及び枠線の色を変えることも容易い。なるべく一つに纏めるのは良いことだ。

追記:画像の幅って最高で60pxだったのか。50pxと勘違いしてた(;´Д`) どおりで横のアキが寸詰まりになる訳だ。

という訳でここまで読んだ人はg:css:id:tredue:20041026も読むこと。liの枠線を用いて更に細かく影を再現している。

[] CSSを書く時の注意。

  1. まずGecko系で作る。Macの人ならSafari。
  2. 次にOpera6, Opera7で調整を行う。
  3. 最後にIEでハックを使いながら崩れないように調整していく(width周りを重点的に)。

こうすると大抵のブラウザで問題なく共通で見られるCSSが作れるので作業が楽である。

最初からIEで描画テストを行いながら作ってしまうのは、非常にお勧め出来ない。というか止めなさい。後で面倒臭いことになることが多い。

UAで判別するのも良いが、UAを偽装する人が稀にだがいる点を忘れてはいけない。JavaScript切ってる人はどうするんだ? JavaScriptを切ってもUAで判断するという手もあるが、Recommuniみたいになっちゃうぞ?

トラックバック - http://css.g.hatena.ne.jp/smoking186/20041024