スタイルシートのバグです(3)

質問

下記アドレスが現在テスト中のサイトのアドレスです。

添付画像の赤枠の部分が
ブラウザーの文字サイズを大きくしていき
横幅がいっぱいになるとなぜかカラム落ちしてしまいます。
親ボックスには横幅のサイズを指定しているものの
子要素には特に幅のサイズ指定などはしていないにもかかわらず
なぜかカラム落ちしてしまいます。
仮に子要素の幅のサイズ指定をしてみたのですがそれでも同じでした
原因がよくわかりません？？
ちなみに一般的なブラウザー全てで同じ現象でした。
どなたかご教授いただけると助かります。
宜しくお願いします。

■HTML
http://sangoclip.web.fc2.com/lesson03/jyuken/
■デフォルトCSS
http://sangoclip.web.fc2.com/lesson03/shared/css/default.css
■リセットCSS
http://sangoclip.web.fc2.com/lesson03/shared/css/reset.css

回答No.5

abril · ベストアンサー

> 例えばレイアウト的にどうしても余裕を作れない場合は何か解決策はあるのでしょうか？

そういうケースってあまり思いつかないのですが。通常の２カラムや3カラムのレイアウトだったらほぼ必ずカラムの間どうしには余白を設けるでしょうし…

そもそも今回の不具合はIE6でのみ起きていたのですよね？つまり、本来の仕様であれば元々の計算（子要素の幅の合計が親要素と同じ）でも隙間無くならべられてカラム落ちはしない筈なのが、IE6というCSSの解釈が何かと独自な困ったちゃんであるが故に起きている事なので、もしCSSもHTMLも間違いのない作りをしているのにどうしてもIE6でだけそのままでは不具合が出る、という状況であれば、その場合はIE6のみハックやコンディショナル・コメント等で処理を振り分ける、かもしれません。

"overflow: hidden"という力業もありますが。
例えば下記などに色々関連項目がまとまってますので、ご覧になってみては。
【参考】http://www.geocities.jp/multi_column/float/07.html

ただ、floatというプロパティは便宜上カラム・レイアウトの用途で使われる事が一般的になってしまいましたが（私も使います）、本来は「コンテナを浮動体にする」事が目的なので、幅に応じて横並びになったり、縦並びになったりするのが仕様に沿った性質ではあるのです。カラム・レイアウトではその性質を一部強引に制御して実現しているわけですので、やはりfloatを使う場合は充分にその本来の性質を理解していなければ、不具合（に見える状態）の適切な対処も難しいでしょう。

あと、各カラムの高さが決め打ちできる様なレイアウト（もしくは片方のカラムが”必ず”もう一方のカラムよりボリュームが少ない・多いが決まっているとか）であれば、floatを使うよりもpositionで配置した方が確実に決まる場合もありますね。ただし、このpositionプロパティもちゃんと理解してないと（特にabsoluteの値を指定したコンテナの適切な処理）それはそれでまた意図しない「不具合」に出くわす可能性もあります。

こういう様々な不具合（あるいは不具合っぽく見える状態）に対処するスキルの引き出しは、仕様を良く把握しつつ色々なケースを実際に検証して行く過程で増えて行くものなので「こういう時はこうしておけば絶対にOK」という様なものは、原則、ないと思って下さい。少なくとも私はその様にしかお答えできません。不具合が起きる原因には色々な要素が絡んでの事が多いですから。

お礼

長々とお付き合いありがとうございました。
そうですね言われてみればごもっともな意見です。
今後状況におおじて考えていきたいと思います。
徐々に他のCSSの機能なども勉強していきたいと思います。
今回は本当にありがとうございました。

回答No.4

abril

No.2です。

> 最上部3カラム部分だけがIE6の文字サイズを「最大」にするとカラム落ちしてしまうのです。
> 文字サイズ「大」までは問題ないのですが「最大」にした途端問題が発生してしまいます。

IE6が今手元にないので確認はできませんが、子要素の幅の合計を親要素の幅ぴったり「明示的に指定」にしてしまって「逃げ」がない場合、落ちる可能性はあります。
また、改行コードが1～2px分ぐらいのスペースとして解釈されてしまう場合もあります。

No.2でのサンプルでも（敢えて説明はしませんでしたが）、floatしている子要素のwidthの合計は親要素ぴったりの530pxにはしていません。それはこういうケースがある事を想定しているからでもあります。幅として明示されなかった残りの分を、コンテナ間の余白に回す様に指定しています。こういう「逃げ」の部分を作っておく事で微細なレイアウトの差（例えば実際に表示される余白の値が１～2px異なっているかも）が出ても致命的な不具合（この場合はカラム落ち）が生じない様にできますので。

今回の場合だと、section01、section02、section03の合計が100+54+376=530で、確かに計算上は親要素とぴったり合うので間違ってはいない筈なのですが、実装では不具合が出る場合があるという事です。また、本件の様な内容であれば見栄え上も、各セクションの間は（テキストのボリュームが増えても）くっつかない様に数pxの余白が出る様に組む方が良いかと思います。

この場合だと、画像の幅は54pxで決め打ちされてますから、p.section02の幅はこのまま変更なしで。p.section01も日付ですからある程度必要される幅は予測ができますから、幅100pxを減らさなくても良いでしょう。その替わり、日付と画像がくっつかない様に右マージンを数px（【A】）入れる事にします。同様に、p.section03の左マージンも数px（【B】）とる事にします。
となると、【A】【B】の分はp.section03の幅から差し引かなければなりません。現在376pxという半端な数値ですから、これを少し切りよく例えば365pxとしてみれば、11px分を【A】【B】分に回せる事になります。
で、約半分の5pxを【A】にmargin-rightとして与えます。そうすると計算上は残り6px分が【B】に付与できる事になりますが、ここは敢えてmargin-leftとしてp.section03に指定をしません。これをやってしまうと、子要素に明示されたwidthと左右marginの合計がまた親要素とぴったり同じになってしまうので、再び同じ現象が起きる事が想定されます。なので、margin-leftを明示しないかわりに、p.section03は左ではなく右にfloatさせます。そうする事で、自動的にsection03の左側には残った分の余白が常に確保できる状態になり、環境による多少の実装の誤差もこの「明示していない」領域で回収できる為、結果カラム落ちを防ぐ事ができます。

以下でIE6での表示結果を試してみて下さい。
＃IE6のWマージン・バグを防ぐ為、floatの値の左右とmarginの値の左右は逆方向になる様に振り分けています。

#main-eria02 p.section01 {
width:100px;
float: left;
margin-right: 5px;
text-align: left;
}
#main-eria02 p.section02 {
width: 54px;
float: left;
}
#main-eria02 p.section03 {
width: 365px;
float: right;
text-align: left;
}

補足

お付き合いいただきありがとうございます。
確かに幅に6pxに余裕を持たせたらカラム落ちしなくなりました。
5pxではダメだったです。
最後に一点質問させてください。
例えば今回のように幅に余裕を作れる場合は問題ないのですが
例えばレイアウト的にどうしても余裕を作れない場合は何か解決策はあるのでしょうか？

回答No.3

noname#119957

>> 赤の部分は、全部幅をピクセル指定で行います。
とありますが中に入る要素の横幅のサイズが決まっているものでしたら
厳密にサイズを決めて各ボックスの幅をピクセル単位で指定する事は問題ないと思うのですがテキストのような部分は正確な数値が算出できなく
仮に幅に多少余裕を持たせてサイズ指定したとしても
環境によっては詰まりすぎとか離れすぎとかになってしますと思うのですがその辺の対処はどうされているのでしょうか？
>>幅を固定するとは：
幅はぴったりに計算します。display-blockで、パディングで間隔を調整します。それで、結果は、常に位置が一定で、文字拡大で下方向に永遠に伸びますのでＯＫとい判断です。テキストオリジンの両端揃えもこれにプラスすればなおいいと思います。

回答No.2

abril

これは各環境のCSS解釈における「バグ」ではありません。
前回のご質問でもそうでしたが、ちょっとまだfloatした要素の挙動についておわかりになっていない部分がある様です。

CSS2の仕様では、floatプロパティを適用したボックスにつていは、「明示的な幅を持たなければならない」としています。
つまり、例えば本件の後者の：

<p class="F-Left Arrow02 M05">あいうえおあいうえお</p>
<p class="F-Left Arrow02">ここのテキストがカラム落ちする～</p>

の箇所は、本来ならp要素（ブロック要素）ですからfloatしていなければこの２つのコンテナはそれぞれは親要素と同じ幅を（明示しなくても）継承する為、カラム組にはなりません。その性質がfloatさせる事で失われる為、幅は「明示しなければ」内包する要素（この場合はテキスト）に依って伸縮し実際の幅は常に成り行きとなります。その為、テキストの表示サイズがある程度小さければ親要素の幅内で2つの子要素が隣り合って浮いて描画される領域が確保されて「たまたま」2カラムに見えますが、テキストのボリュームが増えたり表示サイズを大きくする事でそれぞれが横に回り込むスペースがなくなる事で押し出され、結果としてカラム落ちした状態になります。
＃前者の方はもとよりspanでインライン要素ですから、いわずもがなです。

ですので、現在の：

> ブラウザーの文字サイズを大きくしていき横幅がいっぱいになるとなぜかカラム落ちしてしまいます。
> 親ボックスには横幅のサイズを指定しているものの子要素には特に幅のサイズ指定などはしていないにもかかわらず
> なぜかカラム落ちしてしまいます。

という状態は「なぜか」ではなく「当然の」結果なのです。

仕様を理解できれば、floatを使用してカラムレイアウトを意図する場合「カラム組の表示を維持する」為には必ずそれぞれのカラムとする要素に幅（親要素の幅を超えない範囲で）を明示してやる必要がある、という事も自ずとわかります。

下記は後者の方の修正案の一例です。
＃class名なども変えてあります。個人的には、classセレクタを単なる機能面で分割してそれらの組み合わせでスタイルを与える、というやり方を良しとしていないので。
＃例によって、各環境が標準準拠モードである場合に限定しています。

【HTML】
<div class="hoge clearfix">
<p class="hoge01">あいうえおあいうえお</p>
<p class="hoge02">ここのテキストがカラム落ちする～</p>
</div>

【CSS】
div.hoge {
margin: 0px 5px 4px 15px;
}
div.hoge p {
width: 230px;
margin-bottom: 4px;
padding-left: 20px;
background: url(../images/arrow02.gif) left center no-repeat;
text-align: left;
}
.hoge p.hoge01 {
float: left;
}
.hoge p.hoge02 {
float: right;
}

hogeの描画領域の幅は#main-eria02で指定された530pxが継承されています。ただし、更に左マージン15px、右マージン5pxが設定されている為、hogeの実際の幅は530-(15+5)=510pxとなります。
となると、子要素hoge01とhoge02の描画領域は余白も含め510px以内で収めれば、カラム落ちが生じない事になります。単純に2で割ると255pxですが、それぞれpadding-left: 20px;が設定されているので更にその値を引いた残りの値がwidthになりますので、235pxとなります。
ですが、これだとhoge01とhoge02が隙間無くぴったりくっついてしまうので、適当な余白分の値をwidthから引く事にします。本件では切りよく5pxづつ引いてwidth: 230px;としました。その上で、hoge01を左にfloat、hoge02を右にfloatさせれば自動的に残りの5pxづつ、つまり計10pxの余白が常にhoge01とhoge02の間に確保される状態になります。

＃前者の方も同様の考え方で対処できるでしょう。
＃ただ、前者の方はもうちょっとマークアップを検討された方が良い様にも思えますが…
＃あれは「見出し」扱いでよろしいのでしょうか？
＃あの部分のソースだけを見るなら、「見出し」というよりは「リスト」的な意味合いに見えるのですが…

補足

ご回答ありがとうございます。
ご丁寧にフロートに関しての基本事項まで添えていただき
ありがとうございました。
まだまだ勉強不足で本当にご迷惑おかけします。
で、上記回答いただきました内容を踏まえ修正してみた所
1箇所だけ問題の箇所がありまして・・・・
こんな未熟ものですがもう少しお付き合いいただけると助かります。

最上部3カラム部分だけがIE6の文字サイズを「最大」にするとカラム落ちしてしまうのです。
文字サイズ「大」までは問題ないのですが「最大」にした途端問題が発生してしまいます。

下記にそれぞれのファイルのアドレスを記載していますので、すいませんがもう少しお付き合いいただきたく。
宜しくお願いします。

■HTML
http://sangoclip.web.fc2.com/lesson03_01/jyuken/
■デフォルトCSS
http://sangoclip.web.fc2.com/lesson03_01/shared/css/default.css
■リセットCSS
http://sangoclip.web.fc2.com/lesson03_01/shared/css/reset.css

回答No.1

noname#119957

私のやりかたは、
(1)赤の部分は、全部幅をピクセル指定で行います。
(2)テキスト部の高さを指定してはダメです。
(3)また、float-rightでもいいと思います。
(4)インラインでなく全部ブロックの方がやりやすいかと思います。
**
.clearfixに関しては考慮してませんので、その点は考慮してください。

補足

早々のご回答ありがとうございます。
上記アドバイスいただきました内容で作り変えた場合に
多少懸念があるのですが。
>> 赤の部分は、全部幅をピクセル指定で行います。
とありますが中に入る要素の横幅のサイズが決まっているものでしたら
厳密にサイズを決めて各ボックスの幅をピクセル単位で指定する事は問題ないと思うのですがテキストのような部分は正確な数値が算出できなく
仮に幅に多少余裕を持たせてサイズ指定したとしても
環境によっては詰まりすぎとか離れすぎとかになってしますと思うのですがその辺の対処はどうされているのでしょうか？