• 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を使った横幅を指定しない横並び
• 横並びリストを自動で折り返させる
• 横並びリストを中央寄せにする
• リストを横並びにする

tableのborder-collapse、border-spacingを使ったデザイン

2010/3/27 初稿

tableのth、tdに関するborderを指定する方法は2つあります。
border-collapseは隣接するborderを重ねるか離すかを指定します。
collapseを指定すると重ね、1本線に見えます。separateを指定すると離します。
border-spacingはセルの境界線の間隔を指定します。separateの時のみ有効です。
指定は上下左右の一括指定か、左右・上下のセットで指定します。他のショートハンドのような上・左右・下や、上・右・下・左といった指定はできません。

table{
border-collapse:collapse;
border-spacing:0px;
}

table{
border-collapse: separate;
border-spacing:0px;
}

table{
border-collapse: separate;
border-spacing:1px 1px;
}

table td{
border: #333333 1px solid;
background:#FFFFFF;
}

左は隣接するborderを重ねているので1本線に見えます。
中央は隣接するborderを重ねていないので隣接する部分は太く見ます。
右はborderを重ねずborder-spacingで1xp空けたのでセルごとに隙間があります。

このborderが重なる、重ならないを上手く工夫することにより、同じ見た目を違うcssで、より細かなハイライトの付いたデザインに、などいろいろと活用できます。

まずはよく見かける1pxのbordorがついたtableのサンプルです。これには2通りの方法があります。

table{
border-collapse:collapse;
border-spacing:0px;
}

table td{
border: #333333 1px solid;
background:#FFFFFF;
}

table{
background:#333333;
border-collapse: separate;
border-spacing:1px 1px;
}

table td{
background:#FFFFFF;
}

左はborder-collapse:collapse;でborderを重ねる方法です。重なっているのでどの辺も同じ太さになります。
右はborder-collapse: separate;で隣接するセルの間隔を空けtableの背景色を見せることでborderの様に見えるようにしています。セルの色は指定しない限り透明なのでtableの背景色が透けて見えるためthまたはtdのbackgroundを必ず指定する必要があります。

次にセルのborderをハイライトの様に見せるサンプルです。

table{
background:#333333;
border-collapse: separate;
border-spacing:1px 1px;
}
table td{
background:#dbdbdb;
border: #ffffff 1px solid;
}
table{
background:url(table_gradation.png) repeat-x left bottom;
border-collapse: separate;
border-spacing:1px 1px;
}
table td{
background:#dbdbdb;
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
}

border-collapse: separate;の隙間をborderの様に見せているのでtdのborderが自由に使えます。そこで1pxで表示させ、ハイライトのように使うことが可能です。border-collapse:collapse;でborderを重ねるのでこの方法を使うことができません。
tdのborderなので4辺だけでなく2辺や３辺の指定もできます。
セルだけでなくtableのbackgroundにも画像が使えるので右のtableの様にグラデーションのborderを表現することもできます。