- ベストアンサー
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; }
- HTML
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- abril
- ベストアンサー率69% (388/560)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 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>… 下の方と同じような解決方法でしょうか？ ひとまず解決したものの、これから先も困らないために一度試してみます。 本当にありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
前回の質問を拝見しました 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> これって中身は空白のままでしょうか？ 一度試してみます。 本当にありがとうございました。
- kiyominmin
- ベストアンサー率50% (2/4)
float を使った時の、高さの概念は、ブラウザによって違うものです。 wrapper にborder:1px solid #000000; をかけてみれば、現状が分かると思います。 私は、プログラマなので、htmlでは、できればいいや～位にしか思ってないので、やっつけですが、 <!-- ********* フッター ******** --> <br clear="all"> </dIV> 以上へ変更してみては、いかがでしょうか？ だめでしたら、footerのmarginを削除して、wrapperかfooterにpaddingで試してみてください。 お役に立てれば幸いです。
お礼
ありがとうございます。 wrapperにpaddingを追加でやりたいことができました。 本当にありがとうございます。
- abril
- ベストアンサー率69% (388/560)
> 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 こちらを参考にいろいろ試してみたのですが、うまくいきませんでした・・・ どうかよろしくお願いいたします。
お礼
いつもありがとうございます。 自分のいままでしてきた質問を掘り出されるのは正直、恥ずかしいですね（笑 確かに以前質問させていただいて、FLOATやPOSITIONについて理解するといったものの、ほとんど理解できないまま時間を消化しています・・・ 問題の解決方法はNo2の方の回答とNo5のいただいた回答を組み合わせ？て解決しました。 四苦八苦でしたが・・・ 余計なことなんてとんでもありません。 確かにそのとおりです。あくまで、自分ではですが、一番理解しているつもりのCSSプラスHTMLをなんとかものにするため努力していきたいと思います。 ありがとうございました。