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

リストを横並びにする

2009/3/10 テキスト修正

メニューによく使われるリストを横並びにする方法です。
横並びにするにはfloatプロパティを使う方法と、displayプロパティを使う方法の2種類あります。

まずはfloatを使う方法から解説します。
liをfloatで浮かせて左に詰めていくことで横並びに見えます。

li{
float:left;
padding-right:1em;
}

li a{
background-color:#999999;
}

次にdisplayプロパティを使う方法を解説します。
liはブロック要素なのでそのままでは縦に並びません。それをdisplayプロパティでinlineを指定し、inline要素に変換することで横並びを実現します。

li{
display:inline;
padding-right:1em;
}

li a{
background-color:#999999;
}

どちらも同じ見た目になりますが、ボタンのように均一な大きさで横並びにするためにはfloatを使い、リンクのa要素にdisplay:block、width,hightを指定します。
また、a要素だけにfloatとdisplay:block;を記述した場合はliが段になってしまう場合があるのでliにを記述するほうがコーディングミスが減ります。

li{
float:left;
padding-right:1em;
}

li a{
display:block;
background-color:#999999;
width:6em;
height:3em;
text-align:center;
line-height:3em;
}