CSSハックの使い方を教えてください

質問

CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・

そこで、この際CSSハックを使おうと思っています。
といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・
など個別のブラウザに異なったCSSを指定することができるのでしょうか？
実際の記述方法を教えていただけないでしょうか？
「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・

ちなみに、この現象のほかの解決方法ってあるのでしょうか？

#wrapper{
position:relative;
width:870px;
margin:0px auto;
text-align:left;
}

#foot{
position:relative;
width:100%;
height:auto;
clear:both;
}

回答No.6

abril · ベストアンサー

推測でもう1パターン。
・#footは、#wrapperの内側で#wrapperに対して100％の幅である。
・#footは、#leftもしくは#rightの何れか描画エリアが垂直方向に長い方から常に35pxの余白を伴う。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
（省略）
<!-- ********* ラッパー ******** -->
<div id="wrapper">
<!-- ********* ヘッダー ******** -->
<div id="head">
ヘッダー
</div>

<!-- ********* 左側 ******** -->
<div id="left">
左側
</div>

<!-- ********* 右側 ******** -->
<div id="right">
右側
</div>

<!-- ********* フッター ******** -->
<div id="foot">
フッター
</div>

</div>

</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
/* ラッパーの設定*/
#wrapper {
overflow: hidden;
width: 870px;
margin: 0 auto;
text-align: left;
}
/* ヘッダーの設定*/
#head {
width: 870px;
height: 88px;
background-image: url(img/head-bg.gif);
margin: 0;
}
/* 左側の設定*/
#left{
width: 200px;
float: left;
margin: 0 0 35px 0;
}
/* 右側（メインコンテンツ）の設定*/
#right {
width: 650px;
float: right;
margin: 0 0 35px 0;
}
/* フッターの設定*/
#foot {
clear: both;
width: 100%;
}
----------------------------------------------------------------------
上記、#wrapperの内側に#footが入る場合の変更点：
・<div id="wrapper">からclass="clearfix"は削除。その替わり、#wrapperに"overflow: hidden;"を追加して#wrapperに高さを認識させる。
・#wrapperから不要になった"padding-bottom: 35px;"を削除。
・#leftと#rightにそれぞれmargin-bottomの値を35px追加。
・#footに"clear: both;"を追加。

これでもhackは不要です（少なくとも先程の検証環境上では。おそらくMac OSXでも主要モダン・ブラウザならば問題ないと思います。※これは検証していませんので保証しませんが）。

…余計な事かも知れませんが。
質問履歴を見るとこのHTML＋CSSの分野だけではなく、サーバ移管、CGI、PHP、グラフィック、フルFlashサイト、MovableType設置…等々、ご自身でビギナーと仰られている割には正直言って驚くほど一気に広範囲に手を出されている様ですが、一つ一つ最低限の基礎をきちんと理解するところまではクリアしてから進まないと、いつまで経っても正しい知識は身に付かずスキルを自分のものにすることはできず、従って応用が利かない状態が続くと思います。残念ながら現在の状態ではHTML＋CSSですら（質問者様はそうは思っていらしゃらないのかもしれませんが）「基本的な知識は身につけている」とは言えません。
趣味ではなくお仕事でされている以上、必要最低限の事は自ら学んで確実なものにしていかなければ、いくらこの場で解決方法を回答者から聞くことができたとしても、「そこまで」止まりでしょう。

お礼

いつもありがとうございます。

自分のいままでしてきた質問を掘り出されるのは正直、恥ずかしいですね（笑
確かに以前質問させていただいて、FLOATやPOSITIONについて理解するといったものの、ほとんど理解できないまま時間を消化しています・・・

問題の解決方法はNo2の方の回答とNo5のいただいた回答を組み合わせ？て解決しました。
四苦八苦でしたが・・・

余計なことなんてとんでもありません。
確かにそのとおりです。あくまで、自分ではですが、一番理解しているつもりのCSSプラスHTMLをなんとかものにするため努力していきたいと思います。

ありがとうございました。

回答No.5

abril

ソースを見ましたが…
失礼ながら相変わらず、positionやfloatを「理解して」定義してらっしゃるとは思えません。
ほぼANo.4の回答者様のご指摘と被りますが：
----------------------------------------------------------------------
/* ラッパーの設定*/
#wrapper{
position:relative;→子要素にabsoluteを使用しているわけでもないので不要。
（省略）
}
/* ヘッダーの設定*/
#head{
（省略）
float: left;→親要素の幅一杯でfloatする意味がないので不要。
（省略）
}
/* 左側の設定*/
#left{
（省略）
height:auto;→初期値がautoなのでこれも（この提供されたソースを見る限りは）不要。
（省略）
margin: 0 0px 35px 0;→ここのマージンの事を仰っていると思うので、詳細は後述。
}
/* 右側（メインコンテンツ）の設定*/
#right {
（省略）
}
/* フッターの設定*/
#foot{
position:relative;→（上記説明参照）同様に不要。
（省略）
height:auto;→（上記説明参照）同様に不要。
clear:both;→#wrapperにclearfixを併用しているということは#wrapper内でfloatが解除されているのでこれも不要。
}
----------------------------------------------------------------------
という様な適切ではない定義が多々見受けられます。

そして問題の解決ですが、hackを使用しなくても容易でした。ただし、提供されたソースを見ても若干「正確にはどういう表示イメージにしたいのか」というのが計りかねる箇所がありますので、それによって何通りかの方法がありますが、それはきちんと補足して頂かないと想像の域を出ませんのでとりあえず2通りだけ。

まずは以下の様に推測させて頂きました。
・書式は（今までの質問者様の質問履歴から）XML宣言なしのXHTMLと仮定。
・#wrapperはclearfix（どういうタイプのを使用しているか不明ですが、有効であると判断）でメイン部分（#left＋#right）のfloatが解除されている。
・#footは#wrapperの外でbodyに対して100％の幅である（テキストがセンタリングではないのでちょっと解せませんが）。
・#footとメイン部分との余白は、#wrapperの内側で与えたい。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" href="./css/common.css" type="text/css" media="all" />
<title>サンプル</title>
</head>

<body>

<!-- ********* ラッパー ******** -->
<div id="wrapper" class="clearfix">

<!-- ********* ヘッダー ******** -->
<div id="head">
ヘッダー
</div>

<!-- ********* 左側 ******** -->
<div id="left">
左側
</div>

<!-- ********* 右側 ******** -->
<div id="right">
右側
</div>

</div>

<!-- ********* フッター ******** -->
<div id="foot">
フッター
</div>

</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
/* ラッパーの設定*/
#wrapper {
width: 870px;
margin: 0 auto;
text-align:left;
padding-bottom: 35px;
}
/* ヘッダーの設定*/
#head {
width: 870px;
height: 88px;
background-image: url(img/head-bg.gif);
margin: 0;
}
/* 左側の設定*/
#left {
width: 200px;
float: left;
margin: 0;
}
/* 右側（メインコンテンツ）の設定*/
#right {
width: 650px;
float: right;
}
/* フッターの設定*/
#foot {
width: 100%;
}
----------------------------------------------------------------------
以上のサンプルで検証した結果、IE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XP上でどれも問題なく表示され、#wrapperと#foot間の余白はいずれも35pxとなっています。ご覧の通りhackなどは一切使用していません。

もしこうではなく、
・#footとメイン部分との余白は、#wrapperの外側で与えたい。
ということであれば：
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
/* ラッパーの設定*/
#wrapper {
（省略）
padding-bottom: 35px;→削除
}
/* フッターの設定*/
#foot {
（省略）
margin-top: 35px;→追加
}
----------------------------------------------------------------------
となるだけです。

これでもない、という別の表示イメージを想定してらっしゃるのであれば、正しいイメージがこちらにわかる様に補足して下さい。

回答No.4

leap_day

こんにちは

safari , IE7は持っていないのでどうか分かりませんが・・・

下側・・・コンテンツを内包する<div>…を使用すればIE6 , Firefox , Opera , Netscapeで同じにすることできると思いますが・・・

<div id="wrapper">
<div id="head"></div>
<div id="left"></div>
<div id="right"></div>
<div style="clear:both;"></div>
</div>
</div id="foot"></div>

フッターはwrapperの外ですよね？
中であれば <div style="clear:both;"></div>はいりません

※position配置しないのであればposition:relative;は必要ない気がするのですが？
※#headのfloat:left;は必要ありません
※(footがwrapperの外)#footのclear:both;はいりません
※(footがwrapperの内)<div style="clear:both;"></div>の位置に<div id="foot"></div>を持ってきてください

ただid="left"に対してmargin-bottomを設定してますので左コンテンツの方が多ければ余白が開きますが、右コンテンツの方が左コンテンツ＋余白(35px)より多くなると余白は空きません

そちらの方は<div style="clear:both;">にmarginやheightを指定することで解決できます
（id="foot"がwrapper内であればfootの方にmargin-topを指定）

お礼

ありがとうございます。
コンテンツを内包する<div>…

下の方と同じような解決方法でしょうか？
ひとまず解決したものの、これから先も困らないために一度試してみます。

本当にありがとうございました。

回答No.3

yambejp

前回の質問を拝見しました

floatをclearするところを工夫すればブラウザの違いは吸収できそうですが・・

<div>
<div id="a">左コンテンツ </div>
<div id="b">右コンテンツ</div>
<div style="clear:both"/>
</div>
<div id="c">フッター</div>

お礼

ありがとうございます。
<div style="clear:both"/>
</div>

これって中身は空白のままでしょうか？
一度試してみます。

本当にありがとうございました。

回答No.2

kiyominmin

float を使った時の、高さの概念は、ブラウザによって違うものです。
wrapper にborder:1px solid #000000; をかけてみれば、現状が分かると思います。

私は、プログラマなので、htmlでは、できればいいや～位にしか思ってないので、やっつけですが、

<!-- ********* フッター ******** -->
<br clear="all">
</dIV>

以上へ変更してみては、いかがでしょうか？

だめでしたら、footerのmarginを削除して、wrapperかfooterにpaddingで試してみてください。

お役に立てれば幸いです。

お礼

ありがとうございます。

wrapperにpaddingを追加でやりたいことができました。
本当にありがとうございます。

回答No.1

abril

> CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません

「間を詰める（なくす）」のではなく「空ける」方であれば大抵問題ない筈なのですけどね。

> この際CSSハックを使おうと思っています。

CSS hackは最後に「やむを得ず」使う手段です。「（CSS hackがどういうのものか）よくわかってない」状態で使用することはリスクを伴うと思いますが、大丈夫ですか？

> CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・など個別のブラウザに異なったCSSを指定することができるのでしょうか？

hackの記述法によっては個別に分けられるものもあり、一緒くたになってしまう組み合わせもあります。

> 実際の記述方法を教えていただけないでしょうか？
> 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・

上記に回答することは簡単なのですが、質問者様はそろそろ「知りたいことがあったらまず調べて理解を試みる」という習慣を付けられた方が良いでしょう。本件の場合はキーワードも明快な事この上ないのですし。「CSS　ハック」でググって下さい。無数の解説とサンプルが出てきますから。

ただし、CSS hackはブラウザのヴァージョン・アップにより無効になったり有害になったり（本来バグであったものが解消されて有効になる、もしくはバグ故無視される筈の記述が有効になっていたものがバグが解消されて無視される様になる）する可能性を含む、諸刃の剣であることも理解しておくべきでしょうね。今後、その様な事態が起きた時に更なる対応が必要に迫られる事があるかもしれない、という覚悟が必要だということです。

> ちなみに、この現象のほかの解決方法ってあるのでしょうか？

これだけではわかりません。情報が不足していますので、もっと詳細なソースを提供して下さい。

お礼

ありがとうございます。
CSSハックについては再度調べなおしてみます。

別の解決方法ですが・・・

<div id="wrapper" class="clearfix">

<!-- ********* ヘッダー ******** -->
<div id="head">
</div>
<!-- ********* 左側 ******** -->

<div id="left">

</div>

<!-- ********* 右側 ******** -->
<!-- TemplateBeginEditable name="right" -->
<div id="right"> </div>
<!-- TemplateEndEditable -->
<!-- ********* フッター ******** -->
</dIV>
<div id="foot">

/* ラッパーの設定*/
#wrapper{
position:relative;
width:870px;
margin:0px auto;
text-align:left;
}

/* ヘッダーの設定*/
#head{
width:870px;
height:88px;
float: left;
background-image: url(img/head-bg.gif);
margin: 0px;
}
/* 左側の設定*/
#left{
width:200px;
height:auto;
float:left;
margin: 0 0px 35px 0;
}
/* 右側（メインコンテンツ）の設定*/

#right {
width: 650px;
float: right;
}
/* フッターの設定*/

#foot{
position:relative;
width:100%;
height:auto;
clear:both;
}

簡単に詳細を記述すると以上のような感じです。
http://okwave.jp/qa3517253.html?ans_count_asc=20

こちらを参考にいろいろ試してみたのですが、うまくいきませんでした・・・

どうかよろしくお願いいたします。