1. TOP >
  2. 運営者紹介 >
  3. 運営者ブログ >
  4. 2007年4月

2007年4月

floatに関するバグ解決法 ~背景が消えてしまう場合~

背景色、または背景画像を入れているボックスの中でfloat指定をすると、背景が消えてしまうことがあります。IE6などではウィンドウを上下にスクロールさせると消えたり表示されたり、文字が消えてしまったりと多くのバグが確認されています。

これは背景を入れているボックスにwidth指定を加えることで解決します。

CSS

div {
 width:300px;
 background:#ff0000;
}

また、clear指定にも解決法があります。
brタグに回り込み解除を埋め込む方法をよく目にしますが、背景が消えてしまうことが多々あります。そこで以下のような指定で回り込みを解除させるとある程度のバグを回避できます。

HTML

<div style="clear:both;"></div>

空要素になってしまうものの、レイアウトが崩れてしまうよりはよいでしょう。また、スペーサー(透過画像)で解除させても同様の効果があります。

HTML

<img src="ファイル名" width="幅" height="1" style="clear:both;">

このようにいくつか解決法があるわけですが、width指定を加えて解決するのがベストでしょう。

フォントサイズの単位あれこれ

フォントサイズには絶対サイズと相対サイズに分けられます。絶対サイズは文字サイズを固定する設定、相対サイズは基準となるサイズに依存する指定になります。それぞれの単位には以下のようなものがあります。

【絶対サイズ単位】
「cm」(センチメートル)
「mm」(センチメートル)
「in」(インチ): 1インチ=2.54センチ
「pt」(ポイント): 1ポイント=1/72インチ
「pc」(パイカ): 1パイカ=12ポイント

【相対サイズ単位】
「px」(ピクセル): ディスプレイの画像解像度に依存します。
「%」(パーセント): 他の値(基準値)に依存します。
「em」(エム): 適用要素のフォントサイズを1とします。
「ex」(エックスハイト): 適用要素の英小文字「x」の高さを1とします。

絶対サイズはIEなどのブラウザ設定のフォントサイズ変更を無効にしますが、safariなどのブラウザでは強制的にフォントサイズを変更できるので効果がありません。またアクセシビリティの面からもフォントサイズの固定はユーザーの設定を制限してしまうので望ましくありません。「ありません、ありません」と続きましたが、個人的にはレイアウトに影響してしまう場合など部分的な使用に関しては許されるかと考えています。でも注意は必要です。

CSSレイアウトのコツ2 ~幅指定は外側だけ!~

前回はブラウザによって幅の解釈が変わってしまうことへの対処法を紹介しましたが、今回は幅と内側の余白をまとめて設定する方法を紹介します。基本的には前回同様、widthとpaddingを同時に記述しないことです。それでは以下の例を見てください。

HTML

<div class="box1">
 <div class="box2">
  <p>テキスト</p>
 </div>
</div>

CSS

div.box1{
 width:400px;
}
div.box2{
 width:350px;
 margin-left:50px;
}
div.box2 p{
 padding-left:50px;
}

上の例でも正常に表示されるのですが、以下のように記述すればより効率よく同じ効果を出すことができます。

CSS

div.box1{
 width:400px;
}
div.box2{
 margin-left:50px;
 padding-left:50px;
}

外側(div.box1)の幅にあわせて、内側(div.box2)では幅の指定なしで外余白(margin)と内余白(padding)で幅を調節しているわけです。こうすれば、box2に入れる要素全てに設定しなくても同じ余白を与えることが出来ます。

今回のポイント
width指定は外側だけで内側はmarginとpaddingで調節