• floatを使ったブロック要素の右寄せ、左寄せとclearの方法
• positionで右にはみ出たときに横スクロールが出るのを防ぐ
• 幅100%の要素の背景が横スクロールのときに消えるのを防ぐ
• 高さの違うブロックを横並びで折り返した時の崩れを無くす
• floatとoverflowを使った横幅を指定しない横並び
• ol、liの番号の下にborderを付ける
• 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テクニック

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

tableに関するCSSテクニック

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

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

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

floatを使ったCSSテクニック

• floatを使ったブロック要素の右寄せ、左寄せとclearの方法
• 高さの違うブロックを横並びで折り返した時の崩れを無くす
• floatとoverflowを使った横幅を指定しない横並び
• 横並びリストを自動で折り返させる
• 横並びリストを中央寄せにする
• リストを横並びにする

floatを使ったブロック要素の右寄せ、左寄せとclearの方法

2012/8/20 初稿

CSSでレイアウトするときに必須なのがfloatを使ったレイアウトです。しかし初めのうちはpositionとともに仕組みがわかりにくいプロパティの一つです。
そこでfloatの厳密な原理というよりは、レイアウトに使うときの感覚としてこう覚えておけば苦労はしないということを基準に解説します。厳密な原理についてはW3Sの9.5.1 浮動体の配置: 'float'プロパティ（日本語訳ページ）をご覧ください。

まずはfloatの主に使用するときの例を2つ解説します。

floatとは文字通りほかのレイアウトから浮かすことで、後続の要素は浮くことによって空いたスペースの上まで、右または左に詰まります。これにより雑誌などのように画像にテキストが回り込んだようなレイアウトになります。

このDivにfloat:right;を指定すると、floatを使った右寄せの状態になります。leftを指定すれば左寄せの状態になります。

<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>

.float{
float:right;
width:200px;
height:100px;
background: #999;
}
p{
background: #bbb;
margin-bottom:1em;
}

雑誌のような文字と画像でだけではなく枠組みのレイアウトに使うことにより2カラムや3カラムなどのレイアウトにすることができます。

<div class="float">floatされたDiv</div>
<div class="float">floatされたDiv</div>
<div class="float">floatされたDiv</div>

.float{
float:left;
width:200px;
height:100px;
margin-right:20px;
background: #999;
}

そして、floatを使うときに注意することは、幅の計算をきちんとすること、float含む親要素に高さの影響をあたえないこと、適切な場所でclearすることの3点です。

１点目は、幅の計算をきちんとするということです。
左右に並べて2カラムを作ったりするときに幅のピクセル数を正確に計算することは当たり前のことですが、計算ミスなどにより親要素の幅を1pxでも超えてしまうとfloat落ち、カラム落ちなどと呼ばれるレイアウトの崩れが発生します。
下の例では親要素が600pxのところを子要素が300px＋301px＝601pxになっているために横並びにならずに縦並びになっています。親要素の幅を超えてしまわないようにしましょう。

<div>
<div class="float1">floatされたDiv 幅300px</div>
<div class="float2">floatされたDiv 幅301px</div>
</div>

.wrap{
width:600px;
padding:20px;
background: #bbb;
}
.float1{
float:left;
width:300px;
height:100px;
background: #999;
}
.float2{
float:left;
width:301px;
height:100px;
background: #888;
}

2点目は、高さの影響をあたえないことです。
先ほども解説したようにほかの要素から浮いて切り離された状態になります。しかしposition:absolute;のみのように完全に切り離されるわけではなく、インライン要素に対して幅と高さを確保しつつもブロック要素の高さの計算には影響をあたえないということです。これにより雑誌のようなレイアウトにすることができまが、この関係でfloatさせた要素の方が高さがある場合に背景が切れたように見えます。

<div>
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>

.wrap{
padding:20px;
background: #bbb;
}
.float{
float:left;
width:300px;
height:200px;
background: #999;
}

3点目は、適切な場所でclearするということです。厳密な原理についてはW3Sの9.5.2 浮動体に隣接するフローの制御: 'clear'プロパティ（日本語訳ページ）をご覧ください。
floatはclearするまで後続の要素に影響をあたえ続けます。その影響を止めるために、たいていの場合影響させたくないブロック要素にclear:bothを指定します。
先ほどのサンプルのPとPの間にclearを指定したDivをたしました。
これにより2番目のPはfloatの影響をうけなくなりました。それとともに親要素の中でclearした場合は高さの計算がclearした要素以降まで含まれるようになるため背景色が2番目のPまで続くようになりました。親要素の外でclearした場合は先ほどと同じように背景は切れたように見えたままになります。

<div>
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>
<div class="clear">clear:both;を指定したDiv</div>

.wrap{
padding:20px;
background: #bbb;
}
.float{
float:left;
width:300px;
height:200px;
background: #999;
}
.clear{
clear:both;
background: #888;
}

このサンプルのように毎回親要素の中でclearできるとは限りません。しかし背景色はflatした要素の高さまで続いてほしいといった場合は多々あります。こういったときにclearfixと呼ばれるCSSのテクニックが必要になります。
検索でclearfixと入れるといろいろなパターンのコードが出てきますが 最近のブラウザを対象とする場合は以下のコードで不具合が出ることはありませんしIE6までにも対応しています。また、clearfixという名前は単なるクラス名ですので自由に変更することもできます。

.clearfix:after {
content:"";
display:block;
clear:both;
}
.clearfix{
/zoom:1;
}

<div class="clearfix">
<div class="float">floatされたDiv</div>
<p>通常のP</p>
<p>通常のP</p>
</div>

このコードだけではなくoverflow: hidden;を使ったコードでも同じ効果をあたえることができます。しかしoverflow: hidden;を使うので一部がはみ出たようなデザインにする場合ははみ出た部分が消えてしまうので注意が必要です。

.clearfix{
overflow: hidden;
/zoom:1;
}