![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.3ベストアンサー
- 回答日時:
スタイル部分を以下に差し替えてください。
div.wrap {width:620px;overflow:hidden;background:blue;}
div.left {width:300px;border-right:20px solid red;margin-right:-20px;float:left;}
div.right {width:300px;border-left:20px solid red;float:left;}
右側の線と左の線を重ねネガティブマージンで調整しています。
わからなければ
http://www.k5.dion.ne.jp/~i-araki/css/div-table. …
を参考に。
参考URL:http://www.k5.dion.ne.jp/~i-araki/css/div-table. …
ご回答ありがとうございます。
素晴らしい!overflow:hidden、これには気づかなかったです・・・。
って、調べたら結構出てきましたね。明らかに勉強不足でした。失礼しました。
リンク先に
> 別背景イメージが使えないので没です。
とありますが、以下で、普通に表示できました。
div.wrap { width:620px; overflow:hidden; background:url('background.gif') bottom; }
div.left { width:300px; float:left; }
div.right { width:300px; float:right; }
で、背景画像が使えれば、ボーダーを相殺するために
ネガティブマージンする必要もないですね。
では、なんで、みんなclearfixなんか使ってるのかな・・・と思ったら、
Netscape 7.1で、完全に表示されないですね・・・。
Netscapeはシェアが少ないので、デザインの崩れは許容できますが、
情報が表示されないのは、駄目ですね。
というか、何も「隠す」意図がないのに、hidden なんて指定は、
ハックになるかなと・・・。
で、もう少し調べたら、overflow:auto で解決しました。
※Win IE6、Firefox2、Opera9.2、Netscape7.1で。
(Mac、今、ないので確認していませんが。)
しかもこれは仕様のようです。
http://www.w3.org/TR/2004/CR-CSS21-20040225/visu …
でも、overflow:auto はMac IE5で、スクロールバーが表示されるようです。(未確認)
ただ、Mac IE5のような古いブラウザは(IE6も相当古いですが)、
スクロールバーが表示される程度の不具合には、我慢してもらおうと思います。
ということは、clearfixは、Mac IE5に対応するだけのために使われているのでしょうか?
惰性で使われて続けられているだけなのか、overflowによる親ボックスの高さ確保に、
なにかしら不具合があるのか、どちらなんでしょう。
No.5
- 回答日時:
若干回答とは違いますが・・。
clearfixをなぜそんなに嫌うのか分かりませんが。
clearfixはハックではないですよ。
ハックというのは、CSSのバグを利用したブラウザの差異を埋めるためのテクニックのことを言います。
clearfixは、CSSの仕様通りに記述してそれをfloatの対処に使っているにすぎないのでハックとは(厳密には)言わないと思っています。
なので、バグを利用して・・と思っているのであればバグではないので使用して問題ないと思いますがいかがでしょうか。
clearfixの概要は、親ボックスが内包している子ボックスのfloatを"解除する"テクニックです。
「親ボックスからはみ出している」と明記されていますが、
これは認識の誤りです。(言い方の問題かもしれませんが)
floatさせたボックスは、親ボックスから文字通り「float(浮く)」ので、親ボックスは子ボックスの範囲を識別しません。
そのために、子ボックスが親ボックスからはみ出しているように見えるのです。
ですが、clearfixを使うことで親ボックスの最後の要素にfloatをクリアするclearプロパティを指定することで、
親ボックスがfloatした子ボックスの後に出現する要素を識別するために(見た目的に)子ボックスを含んだ高さにまで親ボックスが広がるわけです。
これは自分の推察ですが、clearfixが広まった理由は、バグを利用したものではなく、かつ簡単に導入できるということから広く使われているものと考えています。(意味なくコピペして使ってる、というわけではないと思います)
余談ですが、自分自身はCSSの処理でどうしてそれがそうなるのかをある程度は検証や推察をしてから使うようにしています。
上記のclearfixに対する認識はそこから導き出したものです。(なので間違いもあるかもしれませんが・・)
なので、sweepeaさんがなぜclearfixをそんなに嫌うのか分かりませんが、自分は納得済みでclearfixを使用しています。
この回答への補足
ご意見いただきありがとうございます。
物議を醸すようなことを書いてしまって、失礼しました。
> clearfixはハックではないですよ。
> ハックというのは、CSSのバグを利用した
私にとってはハックです。
CSSハックの正式な定義というものがない以上、何がハックで、
何がハックでないかは、個人の判断に委ねられると思います。
レンダリングのバグを利用した、CSSの記述はもちろんハックですが、
たとえ、定義通りによる使用であっても、力技で本来意図しない使用法で
使用されているものはハックと考えます。
ボックスの擬似要素afterに
・ピリオド「.」を付けて、
・高さを0にして、
・表示を隠す
「出して、隠す。」これは、私には紛れも無いハックです。
なぜなら、そのような記述は後方互換性が無いためです。
当然ですが、ブラウザの開発者達は、clearfixが正しく表示されるように、
レンダリングエンジンを開発する訳ではありません。
例えば、clearfixがIE7に対応するために、
min-height: 1%;
を追加したのがいい例だと思います。
個人でサイトを運用しているだけなら、1行の追加で済みますが、
何十というサイトを管理している、Web製作会社なら、頭が痛いはずです。
さらにそのサイトが、数百ページに及ぶようなものであれば。
理論上、min-height: 1%; は、表示に害を与えるようなものでは
ないでしょうが、通常、clearfixの使用者は、clearfixハックを
サイト内に多用するため、実務では、サイト内の各ページで、
本当に表示が崩れていないかを目視確認しなければなりません。
(たとえ、大丈夫だ、ということが分かっていても。)
一方、(当然ですが)左にマージンを20px空けたい時に、
margin-left: 20px;
とするのはハックではありません。
CSSの仕様書を、どう斜めから読んでも、解釈に差異が出ようがありませんから。
よって、margin-left: 20px; の意味は、ほぼユニバーサルなものだといっても良いでしょう。
> 「親ボックスからはみ出している」と明記されていますが、
> これは認識の誤りです。(言い方の問題かもしれませんが)
floatは、文字通り、浮かせるのが目的で、後続の要素はデフォルトで回り込みするので、
親ボックスからはみ出すのが仕様通りです。
(すいません、書き方が悪かったですね。IEの方が、独自の表示方法です。)
ですので、floatされた要素は、本来、その要素より「後」に開始する要素によって、clearされるべきでしょう。
clearfixは、言ってみれば、「前」に開始する要素によって、clearを試みているので、
美しくないコードが必要になってきます。
そもそもの私の質問は、「floatでなくpositionで書けないのか」です。
なぜなら、コンテンツや右メニューのカラムを「配置」したい訳であって、
別に「浮かせたい」訳ではないからです。
もし「配置」のためのプロパティが「float」なら、ネーミングが悪すぎます。
やっぱり、positionでは無理なんでしょうか?
もし無理だとしたら、それは誰が悪いわけではなく、W3Cに落ち度があると思います。
(個人的には、今後も(WHATWGでなく)W3Cに期待しますが。)
ちなみに、overflow:auto; は駄目ですかね?
結局、floatだし、これも、もっと厳密な人に言わせれば、
ハックと言われてしまうかもしれませんが・・・。
edo_m18さん、すいません・・・。
「OKWaveサポート担当」からメールがきまして、
> 投稿者自身が運営するホームページ・ブログや(略)
のURLがダメなのと
> 質問に対しての回答ではなく、他の回答者への指摘(略)
がダメなので、削除になったそうです・・・。
【禁止事項】
http://help.okwave.jp/okwave/beginner/prohibitio …
だそうです。
せっかく頂いていた、回答ですが、何卒ご了承ください。
ご回答、アドバイス、ありがとうございました。
でも、何を書かれていたのか、とても気になります・・・。
有益な情報であれば、上記の禁止事項を守った上で、再度ご投稿頂ければと思います。
(embedがobject...
↑途中で切れてる・・・。
No.4
- 回答日時:
背景イメージが使えないですよ。
右と左のdivの背景を別にしたい時、画像にしても、右の高さと左の高さが違う反復地紋では、支障がでます。
バックグラウンドでよければ、ご紹介したページの解説?のところに他のサイトの紹介があったと思うのですが、そこなら、背景を使った、リキッドレイアウトとか、固定とかいろいろリンクされてます。縦リキッドというか、divの癖に左右で成り行きな高さを揃える方法が紹介されていますので、デザインに応じて、使い分けしてください。っていうか、理解されたらもう、必要ないですね。今回はベタだったので、そこを紹介しました。
自分で調べもしない教えてチャン・やってチャンだと思っていたので、皮肉たっぷりに書いてしまいました。大変、失礼しました。
clarfixですか?多分、上記の方法もあることをみんな知らないのだと思います。人のサンプルをコピペし、できないといわれれば潔く諦める。clarfixも声の大きい人が書いたから、一気に広まったのではと推察してます。
overflow:auto;はなるほどですね。無視しているというかインストールしていないUAで不具合があるとは知りませんでした。勉強になりました。ありがとうございます。
この回答への補足
DrFellさん、すいません・・・。
「OKWaveサポート担当」からメールがきまして、
> 投稿者自身が運営するホームページ・ブログや(略)
のURLがダメなのと
> 質問に対しての回答ではなく、他の回答者への指摘(略)
がダメなので、削除になったそうです・・・。
【禁止事項】
http://help.okwave.jp/okwave/beginner/prohibitio …
だそうです。
せっかく頂いていた、回答ですが、何卒ご了承ください。
ご回答、アドバイス、ありがとうございました。
でも、何を書かれていたのか、とても気になります・・・。
有益な情報であれば、上記の禁止事項を守った上で、再度ご投稿頂ければと思います。
(embedがobject...
↑途中で切れてる・・・。
ありがとうございます。
> 右と左のdivの背景を別にしたい時、・・・
なるほど。そういう場合はダメなんですね。
> 自分で調べもしない教えてチャン・・・
最近、結構、教えてチャン化してます・・・。反省してます。
> clarfixも声の大きい人が書いたから、・・・
良くあることですよね。有名な会社や書籍のコードにそうあるから、
という理由で、「なんでこんなことしなきゃいけないの?」
という疑問を持たずに、そのままコペる人。
おそらく、DrFellさんの言うとおりでしょう。
> 無視しているというか・・・
無視していいと思います。(仕事でそのような要求がなければ)
むしろ、Mac IE5に完全対応する方が、害があると思います。
意図的にでなく、単なる無知でIE5を使用しているユーザーに
「ほ~ら、こんなにレイアウト崩れてるよ。サポートも終わってるし、
セキュリティも怪しいし、早く、ちがうブラウザに乗り換えなさい」
というメッセージを伝える方が、良い、と考えます。
No.2
- 回答日時:
floatでもclearfix使わなくてもいけると思いますが、なぜ毛嫌いするのかわかりません。
sweepeaさんの文から想像するに、bodyに大きな3つのボックスがあり、そのうちの真中に更に2つのボックスが入っているのだと思います。
bodyに4つのボックスにされると、ハック?は必要ないと思われます。親ボックスからはみ出さないように親ボックスを使わない方法。また、デザインや条件次第では、3つのボックスでも「ハック(clearfix)を使わないといけない」とは限りません。clearfixでないハックもありますし、ハックはしないで、htmlを汚す方法もあります。
この回答への補足
ご回答ありがとうございます。
例えば、以下のコードをブラウザで表示してください。
--
<html>
<head>
<style>
div.wrap { width: 620px; background-color: red; clear: both; }
div.left { width: 300px; background-color: blue; float: left; }
div.right { width: 300px; background-color: blue; float: right; }
</style>
</head>
<body>
<div class="wrap">
<div class="left">
左カラム<br>
左カラム<br>
左カラム<br>
</div>
<div class="right">
右カラム<br>
右カラム<br>
右カラム<br>
</div>
</div>
</body>
</html>
--
左右カラムを囲むボックスの背景を赤色にしたいのですが、普通のブラウザ(Firefox等)では、子ボックスがfloatしている場合、子ボックスの大きさにあわせて、親ボックスが勝手に伸びることはない様なので、赤い部分が表示されません。
ちなみに、独自の解釈をするIE6は、赤い部分が表示されます。
ハックなしで、Firefoxで赤い部分を表示することはできますか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 魚類 アクアリウムについて質問です。 現在、排水パイプと吸水パイプの位置で悩んでいます。 画像は45cm規 3 2023/08/21 18:28
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- C言語・C++・C# C++言語の16進数の表現についておしえてください 1 2022/11/14 17:46
- HTML・CSS htmlです。 上のところには黒文字でピカチュウで、ピカチュウの文字には影をすべてにつけてください周 1 2023/01/02 12:48
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- その他(言語学・言語) 字を書くときは右手なのに、時々左手を使ったり、自分から見て左側のものは左手で使ったりする人がいますが 3 2023/01/15 07:44
- Word(ワード) Wordでの印刷サイズについて A4の原稿をB5サイズで出力したいとき、 印刷から用紙サイズの指定か 4 2022/04/30 09:51
- Windows 10 ネットからファイルをデスクトップにダウンロードする際、既存のファイルの並びが崩れてしまう 4 2022/04/19 08:20
- ビジネスマナー・ビジネス文書 私の所属する公的機関の文書はとても読みにくく、おそらく、以下が原因のように思われます。 フォントはゴ 1 2022/12/01 07:35
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSSでボックスのheightが0になる
-
プルダウンで長い名前の選択肢...
-
【HTML&CSS】フッター下部の余...
-
【HTML】【CSS】【Swiper】 元...
-
float を使うと隙間ができる
-
<li>の黒い点を消したい。
-
CSS テキストフィールドの文字...
-
テーブル内の画像をマウスオー...
-
CSS、width100%でもできる余白
-
古いIEでレイアウト崩れます。
-
marginとナビゲーションの位置...
-
CSSのposition値の上書き(打消...
-
IEとFireFoxでの指定位置のズレ...
-
CSSの角丸での質問です。 今、C...
-
HTMLのiframeの入れ子について
-
DIVの入り子のwidthの指定方法
-
css初心者 フレックスボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報