• liやtr、tdの背景色を交互に付ける
• liやdt、ddなどで画像を縦に並べた時の隙間を無くす
• :focusを使って入力中のフォームに背景色をつける
• tableのborder-collapse、border-spacingを使ったデザイン
• テキストリンクをpositionでずらしてクリック感をつける
• 検索ボックスのデザインをCSSで整える
• リセットCSSでブラウザのスタイルを初期化する
• フォームの送信ボタンにロールオーバーをつける
• フォームのradiobutton、checkbox、selectのずれを調整する
• display:inline-blockを使った中央寄せ
• CSSで作るプルダウンメニュー
• CSSで作るツールチップ
• 疑似クラス:hoverを使ったロールオーバー
• positionプロパティのrelative、absoluteの簡単な使い方
• 横並びリストを自動で折り返しさせる
• 横並びリストを中央寄せにする
• リストを横並びにする
• フォームのIME-MODEを指定する
• 均等割付でテキストを揃える
• Firefoxでリンクの点線がはみ出る時の対処法
• text-indentのネガティブマージンで、ぶら下げインデント
• リストタグ(ul,ol)のスタイルを元に戻す
• その他のショートハンドプロパティ
• ショートハンドプロパティの使い方
• ブロック要素の左寄せ、中央寄せ、右寄せ
• インライン要素の左寄せ、中央寄せ、右寄せ

positionを使ったCSSテクニック

• テキストリンクをpositionでずらしてクリック感をつける
• フォームのradiobutton、checkbox、selectのずれを調整する
• positionプロパティのrelative、absoluteの簡単な使い方

フォームに関するCSSテクニック

• :focusを使って入力中のフォームに背景色をつける
• 検索ボックスのデザインをCSSで整える
• フォームの送信ボタンにロールオーバーをつける
• フォームのradiobutton、checkbox、selectのずれを調整する
• フォームのIME-MODEを指定する

疑似クラスを使ったCSSテクニック

• liやtr、tdの背景色を交互に付ける
• :focusを使って入力中のフォームに背景色をつける
• テキストリンクをpositionでずらしてクリック感をつける
• 検索ボックスのデザインをCSSで整える
• フォームの送信ボタンにロールオーバーをつける
• CSSで作るプルダウンメニュー
• CSSで作るツールチップ
• 疑似クラス:hoverを使ったロールオーバー

リストのCSSテクニック

• liやtr、tdの背景色を交互に付ける
• liやdt、ddなどで画像を縦に並べた時の隙間を無くす
• CSSで作るプルダウンメニュー
• 横並びリストを自動で折り返させる
• 横並びリストを中央寄せにする
• リストを横並びにする
• リストタグ(ul,ol)のスタイルを元に戻す

tableに関するCSSテクニック

• liやtr、tdの背景色を交互に付ける
• tableのborder-collapse、border-spacingを使ったデザイン

左寄せ、中央寄せ、右寄せのCSSテクニック

• display:inline-blockを使った中央寄せ
• 横並びリストを中央寄せにする
• リストを横並びにする
• ブロック要素の左寄せ、中央寄せ、右寄せ
• インライン要素の左寄せ、中央寄せ、右寄せ

display:inline-blockを使った中央寄せ

2009/9/19 IE用ハックの記述方法をまとめた

ブロック要素での中央寄せをする場合は幅を指定する必要がありますが、文章のブロックを中央寄せにしたい場合や、ページナビゲーションのように幅が可変してしまう場合などCSSであらかじめ幅を指定しておくことが難しい場合はdisplay:inline-blockを使うとうまく中央寄せできます。

下のサンプルのようにtext-align:center;だけで中央寄せの場合は行ごとに中央寄せになり、ブロック要素で中央寄せにした場合は幅が決まっているのでテキストの幅ちょうどで中央寄せにするのは困難です。

inline-blockはインライン要素とブロック要素を併せ持ったような感じになります。
中央寄せをする場合にはインライン要素のように親要素にtext-align:centerを指定し、子要素にdisplay:inline-block;を指定します。
このままでは親要素のtext-align:centerを引き継ぐので子要素のテキストを左詰めにするためにtext-align:left;を指定しました。
このままではIE7以下に対応していないので、これらのブラウザに対応させるためには子要素に/display:inline;/zoom:1;を書き加えると対応します。

div {
text-align:center;
}

p{
display:inline-block;
text-align:left;
background:#999999;
/display:inline;
/zoom:1;
}

<div>
<p>中央せ<br />インラインブロック要素</p>
</div>

上のサンプルのようにテキストの幅ちょうどで中央寄せが出来ました。
親要素のtext-alignをleftやrightに変えると左寄せ、右寄せが出来ます。