moosan63の日記、技術メモ

日記とか、技術メモとか

cssのclassによく定義しておくもの

floatで

.left {
  float:left;
}

.right {
  float:right;
}

って、定義しておくと

<div>
  <h2>ほげ</h2>
  <ul>
    <li class="left">list1</li>
    <li class="right">list2</li>
  </ul>
</div>

って指定するとfloatできるようになるので、ぱっと見どれがfloat指定されてるのかわかりやすくなっていいと思います。

あと、floatやるならclearfixも忘れずに・・

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

追記(2012/10/12)
個人的にはセレクタに定義して使いまわすのがカッコイイと思っていたが、
親要素にclearfixのものを定義するほうが良いらしい・・・。
ただ、直接書いているとやはり効率がワルイしプログラマ的にはなんか気持ち悪いので、
sassやlessなどを使ってclear fix部分をimportして使うのがいいのかなあと思いました。