NN4.x & Opera
IE4に外部CSSを読み込ませない：@import利用時の注意点
@import の記述による読み込み
全ての古いブラウザをここまでで阻止できているか？いやMacIE4.5が・・
基本ルール
コメントを入れて探しやすくする
ツリー構造の記述
その1：構造上のマークアップ無しタイプ＝Clear fix
CSSハックを使った外部スタイルシートの構成
プロパティの順序
CSSの優先度
ボックスを中央揃えにする
floatとmarginを適用している要素にはdisplay:inline;
background-positionプロパティ - 背景画像の表示位置の指定。
マージンとパディング
IDとCLASSの使い方
IE6 ポジショニングバグを防ぐ 『THE HOLY HACK』
参考ページ
CSSレイアウトの手順
表示崩れ対策
display: 表示方法
基本はdiv要素+id
classとid
画像
基本的な画像の使い分け
色を指定するなら
widthとpadding/borderを一緒に指定しない
CSSスタイルシートでよく使われるプロパティ、書式など
初期化など
文章内のリンクテキストのアイコンをつけるなら
background-position
左右マージンが指定値より大きくなってしまう
clearプロパティの指定で不要な余白が出来てしまう
ＩＥでブロックレベル要素がセンタリングしない
コメントがフロートボックスの位置をずらしてしまう
ＩＥ６で見た場合カラム落ちしてしまう
見出し横のボタンがうまく配置できない
CSSのボックスモデルの相殺
リンク擬似クラスとダイナミック擬似クラスの記述例
リスト項目を横に並べる
a要素のリンク擬似クラスを使ったロールオーバーを作るには
フロートボックスの下マージンが適用されない
floatとclearの同時指定は回り込みが解除されない
親要素との間にマージンが開かない
!import宣言が無視されてしまう
marginをマイナス指定した子要素が一部消えてしまう
ブロックボックス内の文字列が消えてしまう
背景画像がボーダーの下に隠れてしまう
リストはinlineで並べると隙間が生じてしまう
画像置換によって画像外にリンク範囲の破線が出てしまう
display:block;の指定で余白があいてしまう
text-align:centerの指定がブラウザごとに違う
正しい順に擬似クラスを指定する
ウィンドウサイズを変更したらレイアウトが崩れた
横並びにしたメニュー項目が縦に並んでしまった！
IEで入力フィールドのテキストが拡大できない
Netscapeでみるとなぜか背景が表示されない
margin幅がIEだけ倍になってしまう
インライン配置のリストに隙間が出来てしまう
文法は正しいはずなのにスタイルがきちんと反映されない
CSSレイアウトで背景や境界線がうまく設定できない！
floatで配置したブロックが落ちてしまった
IEでリストに指定した背景画像が表示されない！
文字サイズを変更すると画像の表示位置が上下に動いてしまう！
IEで表示するとリンクの下線が綺麗に揃わない！
marginが重なると思うように表示されずに消えてしまう！
IEでなぜか最初の文字だけ消えてしまう
横に並べたメニュー部分の表示が崩れてしまう！
リストの見た目がブラウザによって異なってしまう！
リスト項目の先頭の記号を画像にしたら縦たて位置がずれる
文字サイズに応じて大きさの変わるナゲーション
文字サイズに応じて大きさの変わる背景画像を使ったナゲーションの実現
段落間のborderがなぜか下まで表示されない！
IEでtable要素内のfont-sizeが継承しない！
firefoxでセレクとボックス内が隠れてしまう！
入れ子ボックスの指定が意図どおりに反映されない！
マーカーとして表示した背景画像の上下がきれる！
clearを指定した要素の上に余白ができてしまう！
絶対配置の位置がどうやってもずれてしまう！
画像置換したリンクの輪郭線が画像外まで伸びてしまう！
タイプセレクタに直接背景を適用しても反映されない！
h2要素のmargin-topで文字組みの上に余白が出来てしまう！
フッターがページ上部に配置されてしまった！
topやleftなどのプロパティが効かない！
文字サイズを縮小したら背景画像が切れてしまった！
IE6とIE7に指定したハックが反映されない！
hr要素の位置や表示がブラウザごとに違う！
コンテンツに長いURLが含まれるとレイアウトが崩れる！
フォームのtextarea部分がIEで見ると広がる
メニューのリスト画像の位置が揃わない
IE6で絶対配置した要素が表示されない
IEやSafariでCSS無効のページが表示されてしまう
IE7で隣接セレクタが適用されない
指定したはずのborderと背景が適用されない！
positionで配置したボタンの位置がブラウザによって異なる
Operaでa要素内の画像が指のカーソルにならない
同一のボックスが複数並ぶような場合
clearプロパティとmargin-topを同時に指定すると間隔が空かない！
リストで画像を敷き詰めると隙間ができる
入力フィールドとボタンが微妙にずれてしまう
IE7のページズームで拡大すると背景画像が拡大されない
positionを使ったらIE7で表示が崩れた
Tutorial 1 - 背景の画像を箇条書き
メニュー(リスト)の画像をカーソルオン時にロールオーバーする
リストを横向きに配置してメニューバーを作る
フッタ部分リンクメニューのリストタグによる実現方法
画像を使ったメニュー
CSS - dtをfloatする場合の注意点
dtの横に隣り合う部分がIEで3px右にずれる
dtにborderを入れる
dt, ddを通してborderを入れる