- ベストアンサー
CSSハックの使い方を教えてください
abrilの回答
- abril
- ベストアンサー率69% (388/560)
ソースを見ましたが… 失礼ながら相変わらず、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;→追加 } ---------------------------------------------------------------------- となるだけです。 これでもない、という別の表示イメージを想定してらっしゃるのであれば、正しいイメージがこちらにわかる様に補足して下さい。
関連するQ&A
- blogのwrapperの上下に余白が10pxほど空いていますが、つめるにはどうしたらいいでしょうか？
wordpressを使用してブログを作成していますが、wrapperの上下の部分に、10pxほど余白ができてしまっています。 IE5 IE6 FireFoxのいずれでも、余白があるのですが、この余白をつめるには、どうしたらいいのでしょうか？ cssの定義は以下の通りなのですが、これは、cssでは、余白を埋めることはできないのでしょうか？ .wrapper { background: url(images/wrapper.png) repeat-y; position:relative; width:1000px; margin:0px auto 0px auto;
- ベストアンサー
- HTML
- cssハックを勉強中で、使い方について質問です。
現在cssハックを勉強中です。 あるサイトで調べるとoperaだけに使う場合 *+html:first-child p { /* for Opera */ line-height : 150%; } このように表示されてました。 IE4-IE6のアンダースコアハックの使い方は分かったのですが 上記のcssハックは今ひとつ使い方が分かりません。 例えば下記のcssがあったとして ul.piyo{ margin:0 0 10px 0; } ul.piyo li{ margin:0; } ul.piyo li.hoge a { width:100px; height:10px; display:block; padding:0; margin:0; background:url(../img/hoge.gif) ; } ul.piyo li.hoge a:hover { background-position:0 -18px; } ...以下、hoge2、hoge３と同じ<li>のcssが続く。 各hoge、hoge2、hoge3の下部分にoperaだけmargin10pxをつけたい場合 *+html:first-child li.hoge { /* for Opera */ margin:0 0 10px 0; } このように表記し、hoge2、hoge3と付け足せばいいのでしょうか？ 説明下手で申し訳ありません。 分かりづらいところは補足いたしますのでどうぞご回答よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSハックについて・・・
ホームページを作っていて、IEではちゃんと表示されるのですが、 FirefoxとOperaでは思い通りに表示されません。 これをどうにかしたいと思います。 前に、どこかのサイトでCSSハックという言葉を見たことがあるのですが、主にFirefoxに、CSSハックを利用したいです。 Firefoxのみ、またはFirefoxを含む様々なCSSハックの方法を教えてください！ 今は、OperaよりもFirefoxを優先してほしいです。
- ベストアンサー
- HTML
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■ ■＝ヘッダー □□●●●● □＝メニュー □□●●●● ●＝コンテンツ（中身）1 □□○○○○ ○＝コンテンツ（中身）2 □□○○○○ ▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSに追加した、footer記述が不完全か
footer 部を下記の通りCSSに追加したが、画面の最大化では正常ですが、最小化にすると右に横ずれを生じ、どこを修正すべきか分からず解決出来きません。 どうかご教示のほどお願いします。 （例題を参考にして記述したものです。） html{ position: relative; min-height: 100%; padding-bottom: 100px; } div#footer{ font-size: 12px; position: absolute; left: 150px; （例題は、 left: ０; であるが、大幅に左にずれる。） bottom: 0; width: 960px; （例題は、width: 100%; であるが、右にずれて、設置した仕切り線が無限に右に伸びる現象になる。） height: 100px; } 参考までにCSSに既に記述している---次のwrapper 表示に関係があるのでしょうか。 div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.6; }
- ベストアンサー
- CSS
- CSSでIEとFirefoxでの表示の違い
IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- DreamweaverでのCSSファイル作成について
DreamweaverでCSSレイアウトを行っています。 ボックスモデルハックのIE5.5以前のブラウザ用の値がいつの間にかモダンブラウザ用の値になってしまします。原因がおわかりの方教えてください。 （---------例--------） #main{ margin:20px auto; padding: 30px 50px; width:700px; voice-family: "?"}?""; voice-family:inherit; width: 600px; } html>#main { /* Opera */ width: 600px; } がいつの間にか、 #main{ margin:20px auto; padding: 30px 50px; width:600px; voice-family: "?"}?""; voice-family:inherit; width: 600px; } html>#main { /* Opera */ width: 600px; } といった感じに、widthが全て同じ値になってしまいます。同じような経験がある方いませんか？ ※『?』はバックスラッシュの文字化けです
- ベストアンサー
- HTML
- どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。
ＣＳＳレイアウトで、サイトを作成していたのですが、 最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。 ３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。 こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙） 現在のＣＳＳは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSで指定した背景画像にリンクエリアを設定する方法。
メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。 大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。 以下CSSのソースです。 #main_visual { background:url(../img/main_visual.jpg) no-repeat; width:666px; height:418px; text-indent:-9999px; } #main_visual a{ display:block; width:338px; height:43px; position:relative; top:324px; left:308px; } 上のように、666 X 418の画像の中に、 上から324px 左から308pxの位置に大きさ338 X 43のリンクエリアをつくリたいのですが、、上記だと、IE7 IE6ではうまくいくみたいですが、 firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。。 どのようにリンクエリアを指定するのが最もスマートな方法なのでしょうか？ 毎回悩んでます。。ちなみに、*:first-child+html このIE7用のハックってまだ使えたりするんでしょうか？^^;
- ベストアンサー
- CSS