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分も差し引きます。

表示モードとは、それぞれの互換性を重視した後方互換モードと、W3Cの仕様を重視した標準準拠モードです。ウェブサイト制作者が仕様に準拠して正しい書式に沿った文書を作成していれば何も問題はありませんが、ウェブ技術の進歩に未対応の場合や、一部問題のある記述をしている制作者もいる為に、文書型定義（DTD）に応じて表示モードを自動的に切り替えてしまう機能が備わっています。

DOCTYPEによる解釈の違い

DOCTYPEによる解釈の違いはさまざまありますが、以下はレイアウト崩れ関係する部分です。

• paddingの解釈
• borderの解釈

サンプルソース
#sample{
width: 200px;
margin: 0;
padding: 0 10px;
border: 1px solid #cccccc;
}

上記ソースの場合、後方互換モードの解釈は200pxですが、標準準拠モードでは222pxとなります。つまり、標準準拠モードではpaddingとborderはwidthに含まないと解釈されます。

Internet Explorerでは上手く表示できたのに、Firefoxではレイアウトが崩れた,,,,というのは、これが原因の一端です。

関連情報：CSSレイアウト崩れの原因について

標準準拠モードと後方互換モードの解釈について

以下はheight指定時のブラウザの解釈についての注意事項です。

• 標準準拠モードはheightにpadding及びborderを含みません。
• 後方互換モードはheightにpadding及びborderを含みます。

上記はレイアウトに大きく影響します。レイアウト崩れの原因になります。

関連：CSSレイアウト崩れの原因について

標準準拠モードと後方互換モードの解釈について

以下はwidth指定時のブラウザの解釈についての注意事項です。

• 標準準拠モードはwidthにpadding及びborderを含みません。
• 後方互換モードはwidthにpadding及びborderを含みます。

上記はレイアウトに大きく影響します。レイアウト崩れの原因になります。

関連：CSSレイアウト崩れの原因について