floatに関する指定について

以下はfloat指定の際の注意項目です。確認してみて下さい。

width指定をしていない。

すべてのブラウザで起こるわけではありませんが、Mac IE5ではfloat指定の際widthも指定しなければ回り込みが上手く反映されません。

widthを指定する事は、余白を設定する場合やリンク領域を要素全体に広げたい際にも重要になります。普段から記述する事をお勧めします

floatを指定した同方向にmarginを指定している。

サンプル

#sample{
float: left;
width: 180px;
margin-left: 20px;
}

IEではfloatと同方向にmarginを取ると、幅が2倍で表示されます。

widthの計算。

• 全体の幅を超えていないか
• 余白分差し引いているか
• border分差し引いているか

以下のCSS指定サンプルではレイアウトは崩れます

#wrapper{ width: 700px; }

#content{
    width: 500px; /* この場合なら 489px */
    float: left;
    margin: 0 10px 0 0;
    border-right: 1px solid #000;
}

#sidebar{
    width: 200px;
    float: right;
}

#footer{ clear: both; }

標準準拠モードと後方互換モードに関する部分です。詳細はCSSレイアウト崩れの原因についてで確認して下さい。

どの文書型定義（DTD）に従って記述しているかを明確にします。以下はDTDとレタリングモードの一覧です。

XML宣言について

上記レタリングモード一覧にもあるように、IE6ではXMLを宣言すると強制的に互換モード表示になります。CSS側での対応も可能ですが、現状ではXMLを宣言しない方が（記述しない）望ましいです。

この項目はレイアウト崩れにはあまり関係がありませんが、この項目も(X)HTMLの見直しと同様に基本的な部分であり、CSSの指定が反映されない時などは、下記のパターンが大半です。

• id or classの記述ミス
• セレクタ名の記述ミス

id or classの記述ミス

例えば、(X)HTML側で<div id=”sample”>としているにも関わらずCSS側では.sampleとしている。

セレクタ名の記述ミス

例えば、(X)HTML側で<div id=”sidebar“>としているにも関わらずCSS側では#left-sidebarとしている。

例えば、(X)HTML側で<div id=”left-sidebar“>としているにも関わらずCSS側では#left_sidebarとしている。

初歩的なミスですが、実際この手の記述ミスは案外多いものです。

CSSのプロパティ等についての知識が豊富でも、肝心な(X)HTMLの記述がおろそかでは何の意味もありません。ウェブ標準仕様に従うのであれば、(X)HTMLの正確なマークアップと正しい使い方をしなければなりません。

CSSの指定を調べる前に、(X)HTMLの記述が正しく行われているかを確認しましょう。

• IEでは上手く表示しているのに、Firefoxで表示したらサイドバーが落ちていた。
• IE6では上手く表示しているのに、IE7で表示したらサイドバーが落ちていた。
• Macで表示したらレイアウトが崩れていた。

CSS指定によるレイアウト崩れの原因については、さまざまな要因が考えられますが、基本は(X)HTMLのマークアップが正しく記述されているかを最初に確認しておきましょう。

以下のレイアウト崩れに関する解説は、CSSハックの解説ではありません。IE7の登場によりIE6で使用可能だったハックがIE７では無効となるように、ブラウザ側の対応も次第に改善方向に向かいます。ハックは取り敢えずの処置と考え、CSS指定の基本を理解しましょう。

ボックスモデルの概念

レイアウトの場合だけでなく、<div> <h1> <img>等の各要素にもCSS指定をしますが、これらの各要素はすべてボックスという概念を持っています。

CSS指定でのレイアウト崩れの原因の多くは、上記サンプル図の padding と border によるところが大半です。

標準準拠モードと後方互換モード

標準準拠モードと後方互換モードのCSS解釈の違いについて解説します。

表示モードについて

標準準拠モードは width 及び height に padding 及び border を含みません。

後方互換モードは width 及び height に padding 及び border を含みます。

簡単なサンプルとして下記のような指定をした場合、

div.sample{
    width: 400px;
    padding: 20px;
    border: 10px solid #000;
}

後方互換モードは width 及び height に padding 及び border を含むので幅は400pxです。

標準準拠モードは width 及び height に padding 及び border を含まないので下記サンプルのようになります。

上記のように、CSSで指定した width:400px; はcontent領域(データ領域)の幅を意味します。つまり、上記サンプル指定では、content領域(データ領域)が400px、paddingが左右で40px、borderが左右で20px、合計460pxがdiv.sampleの横幅になります。尚、今回、高さについては無視していますが基本は同様です。

標準準拠モードでwidth:400px;にする場合は下記のように指定します。

全体の幅を400pxとしたいので、400pxからpadding:20px;（左右で40px）とborder:10px;分（左右で20px）を差し引いたものがwidthとなります。

関連情報：DOCTYPE宣言とレタリングモード表

標準準拠モードによるwidth指定サンプル1

実際の指定にありうるパターンで解説します。

• サイドバー部分200px（#sidebarとする）
• 余白を左右に10px（今回はpaddingとする）

#sidebar{
    width: 180px;
    float: right (or left);
    padding: 0 10px;
}

表示上での幅は200pxですが、実際に#sidebar内に記述できるのは180pxという点に注意。180pxを超えるバーナーやイメージ画像等を入力するとサイドバーがもしくは本文部分が落ちます。

標準準拠モードによるwidth指定サンプル2

ウェブサイトの段組みを例にしてみます。

• 全体の幅を700px（#wrapperで包括）
• 記事部分を500px,左寄せ（#contentとする）
• 記事部分の余白を左右に10px（今回はpaddingとする）
• 記事部分の右側にborder（1pxとする）
• サイドバー部分200px,右寄せ（#sidebarとする）
• 余白を左右に10px（今回はpaddingとする）

#wrapper{ width: 700px; }

#content{
width: 479px;
float: left;
padding: 10px;
border-right: 1px solid #000;
}

#sidebar{
width: 180px;
float: right;
padding: 10px;
}

#footer{ clear: both;}

標準準拠モードは width 及び height に padding 及び border を含まないので、borderの1px分も差し引きます。