注: レガシーブラウザ未検証

最近マークアップを書く事が増えて、色々調べたので。
プログラマーがこういうの書くとすぐにjQueryに頼りがちになりがちな気がするけど、スタイルに関することはなるべくCSSでやるべきだとおもう。

ただし、CSSのスニペット類はほっておくとただのおまじないの集まりになりがち（すでになりつつある）ので、最小構成な感じでまとめておきたいとおもった。
最小構成なので、実際使う際は各々を組み合わせたり応用したりする感じになるとおもう。

なお面倒なのでsassとかstylusの形式で書いてますが、使うのは変数くらいなのでそのままcssにもっていけます。ちなみに素のcssは//でのコメントアウトに対応していないみたいなので、/* */を使いましょう。

あと、floatの挙動とかについて先にざっとみておいたほうがよりわかりやすいです。
http://webdesignrecipes.com/css-visual-formating-model/
このサイトはとても参考になりました。

例に使うhtml

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="./main.css" type="text/css" media="screen" charset="utf-8">
  </head>
  <body>
    <div id="container">
      <h1> container </h1>
      <div id="content">
        <h1> content </h1>
        <div id="main">
          <h1>main</h1>
          <div class="column">col</div>
          <div class="column">col</div>
          <div class="column">col</div>
        </div>
        <div id="side">
          <h1>side</h1>
        </div>
      </div>
      <div id="footer">
        <h1>footer</h1>
      </div>
    </div>
  </body>
</html>

とりあえずこんな感じで。
その他、cssのresetやnormalizeは各自でやるような感じで。

要素の中央寄せ

CSS書き始めの最初の壁っぽいきがする。text-align: center はあくまで要素内のテキストを中央にそろえるものなので要素には使えません。

#container
  width: 100%  // いくつでもよい

#content
  width: 960px  // 任意のサイズ
  margin: 0 auto

親に対して、子にサイズを与えて、かつ左右のマージンにautoを指定することで中央にもっていくことが出来る。これはheightでも同じ。
なお、左のマージンを0などにすると左寄せになる。逆も然り。

カラムっぽく横並びにする

要素には、inlineなものとblockなものがあるらしい。

blockな要素については、普通に指定していくと上からしたに積み上がっていく感じになる。
inlineな要素は、何も設定しなければ左から右へとつながっていく感じになる(spanやaの初期状態がこれ）。が、この場合width, heightが効かなくなる。
width, heightを指定しつつ要素を横並びにしていきたい場合は、inline-blockの指定をすると良い。

この項は、カラムっぽくしたdivとかsectionとか、頻出する気がするケースだとliを横並びにしていく時に使える。

注意1:
inline-blockはIE7以下は非対応なので、そういうミッションに使う時はCSSハックをいれるか、使うのを諦めるかしましょう。また、IE8でもちょっと挙動がおかしかったりするので頑張りましょう。
注意2:
例のままでは各要素に隙間が出来てしまいます。
消し去りたい場合は、display: inline-block; による隙間を消すCSS完全版やグーグリングを駆使して頑張ってください。


.column
  width: 150px  // 任意
  height: 150px
  display: inline-block

ブログっぽい左右構成

content-width =  960px 
sidebar-width = 250px

#content
  width: content-width
  // floatさせた子要素の高さは消えてしまう。
  // なのでcontentの範囲を子要素にまで及ばせる場合は以下のスタイルを指定するべし。
  // overflow: hidden

#main
  width: content-width - sidebar-width
  float: left

#side
  width: sidebar-width
  float: right  // leftでもよい。構成の都合とかで使い分ける

コンテンツが小さい時も常にフッターを一番下に持っていく

html, body
  height: 100%

footer-height = 100px  // contentがfooterにかぶさらないように使う

#container
  height: auto !important
  min-height: 100%
  position: relative
  overflow: hidden

#content
  padding-bottom: footer-height

#footer
  height: footer-height
  position: absolute
  bottom: 0

常にある要素の高さ（サイドバーとか）を最強にさせておく

ブログとかだと、コンテンツの高さに対して常にサイドバーを最長まで伸ばしておきたい欲求とかはありがちだとおもう。
特に背景色とかを指定してると、mainの長さに負けた瞬間に色が消えたりしてイライラすると思う。

以下ではサイドバーに対して効かせている例。
なおこれはかなりハックっぽい記法で気に食わないので、もっといい方法知っている人がいたら教えて欲しい。

ちゃんと動いてるかどうかは、#mainにpを入れまくったり、#contentにheightを指定したりすればよい。
footer下部固定とも同居できる。

content-width = 960px 
sidebar-width = 250px

#content
  width: content-width
  overflow: hidden

#main
  width: content-width - sidebar-width
  float: left

#side
  width: sidebar-width
  float: right
  // とりあえずデカい数字を指定しておけばいいらしいという雰囲気
  padding-bottom: 10000px
  margin-bottom: -10000px

他にも思いついたらふやす

CSS学びはじめに役に立ちそうなレイアウト作りのスニペット