- 締切済み
カラム落ちの対処法について
独学でＨＴＭＬ５とＣＳＳ３を勉強中で、教本を読みながら以下のようなＣＳＳを書いたところ、Ｆｉｒｅｆｏｘ、Chrome、Ｓａｆａriではきちんと描画しますが、ＩＥ９とOperaではカラム落ちしてしまいます。 横幅の合計も間違っていないと思いますし、数値を減らしても変わりません。 本によるとIE9は対応しているようなんですが、「flote」で書かないとダメなのでしょうか。 それと、ベンダープレフィックスの書き方ですが、「プロパティ」と「値」のところのどちらに書くのが正しいのでしょうか、それともどちらでも構わないのでしょうか。 本によって異なるので。 #contentwrapper { width: 980px; display:-webkit-box; display:-moz-box; display:-o-box; display:-ms-box; display:box; } #box01 { border: solid 1px; margin: 4px 0px; padding: 8px; width: 760px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: -o-border-box; box-sizing: -ms-border-box; box-sizing: border-box; } #box02 { border: solid 1px; margin: 4px 0px 4px 10px; padding: 6px; width: 210px; box-sizing: -webkit-border-box; box-sizing: -moz-border-box; box-sizing: -o-border-box; box-sizing: -ms-border-box; box-sizing: border-box; } 以上、２点の回答宜しくお願い致します。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞display:box;を設定した場合に、widthを使わない事は知りませんでした。 いえ、使いますが、この様な場合は使いません。それはboxの目的を考えればわかると思います。段組に使うときは-- なお、ベンダーフィックスは -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; と記述するはずです。 ＞折角セレクタの詳細度のURLを頂きましたが、チンプンカンプンです。 CSS3を学ぶ前にCSS2.1を完璧に身につける必要があります。なんでもいきなり飛び越したらダメです。 CSS2.1の『6. 値の割り当て、カスケード処理、継承 ( http://www.w3.org/TR/CSS2/cascade.html )』は、【カスケーディング】スタイルシートと言うくらい、CSSの根幹に関わる部分です。プロパティはその後に身につけるべき。CSS3もこのカスケーディングの仕組みは大きく変わっていません。--セレクタは増えました。 (注)No.1で示した「値の割り当て、カスケード処理、継承」のリンクはCSS2のもので、現在ウェブ標準とみなされているものはCSS2.1です。CSS2.1は詳細度の計算が変更になっています。 しかし、概略は邦訳のあるCSS2で理解して変更点だけ補足すれば良いでしょう。 詳細度が4桁になりました。 style属性の詳細度がa=1になりました。 詳細度とはa,b,c,dの4桁の数値で表されますが、桁上がりはしません。 「0,12,5,1 ということもありうるということ」 ★とにかくカスケーディングと詳細度の計算だけは--とは言っても常識で判断できますが--- 先の例で言うと div.section div.section{ /* 詳細度 0 0 2 2 */ display:box;/* 継承されるプロパティ */ } div.section div.section div{/* 詳細度 0 0 2 3 */ background-color:green;/* 継承されるプロパティ */ } div.section div.section div+div{/* 詳細度 0 0 2 4 */ background-color:lime;/* 継承されるプロパティ */ } div.section div.section div+div+div{/* 詳細度 0 0 2 5 */ background-color:aqua;/* 継承される */ } div.section div.section div{/* 詳細度 0 0 2 3 */ background-color:green; box-flex:4.0/* 継承されない */ } div.section div.section div+div{/* 詳細度 0 0 2 4 */ background-color:lime;box-flex:1 } div.section div.section div+div+div{/* 詳細度 0 0 2 5 */ background-color:aqua;box-flex:2 } となります。登場順に関わらず詳細度が高いものが適用されます。 ★HTML5とCSS3の参考書は脇にのけて、今はHTML4.01strictとCSS2.1を徹底的に身につけましょう。断じてその方が早いです。 strictですよ!!!!! その後で、「HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )」 なお、HTML5の新しい要素名は、HTML4.01で作成するときの良い参考になります。すなわち <body> <div class="header"> <div class="nav"></div> </div> <div class="section"> <div class="section"> <div class="aside"> </div> </div> </div> <div class="footer"> </div> </body> と書くようにすれば、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より に適合しているし、そのままHTML5に書き直すことも出来る---書き直さなくても<doctype>を書き直すだけでHTML5にはなるけど・・ 最後に、この段組でしたら、position:absoluteで行うべきですね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
display:boxを指定したときには、その内部のboxにはwidthは指定しません。 <div class="section"> <h2>display:box;</h2> <div class="section"> <div> <p>あいうえお</p> </div> <div> <p>かきくけこ</p> </div> <div> <p>さしすせそ</p> </div> </div> </div> の場合 div.section div.section{ /* 章の内部の項について */ display:box; } /* わかり易く色分け */ div.section div.section div{background-color:green;} div.section div.section div+div{background-color:lime;} div.section div.section div+div+div{background-color:aqua;} となります。widthは指定してはなりません。 box内のボックスの比率を指定するには、box-flexプロパティを指定します。 すなわち div.section div.section div{background-color:green;box-flex:4.0} div.section div.section div+div{background-color:lime;box-flex:1} div.section div.section div+div+div{background-color:aqua;box-flex:2} です。 ただ、CSS3は現状では未勧告なため、ベンダーフィックスを使わないとなりません。 div.section div.section{ display:box; display:box; width:100%; /* ベンダーフィックス */ display:-moz-box; display:-webkit-box; } div.section div.section div{ -moz-box-flex:4.0; -webkit-box-flex:4.0; -o-box-flex:4.0; -ms-box-flex:4.0; } div.section div.section div+div{ -moz-box-flex:1.0; -webkit-box-flex:1.0; -o-box-flex:1.0; -ms-box-flex:1.0; } div.section div.section div+div+div{ -moz-box-flex:2.0; -webkit-box-flex:2.0; -o-box-flex:2.0; -ms-box-flex:2.0; } /* わかり易く色分け */ div.section div.section div{background-color:green;} div.section div.section div+div{background-color:lime;} div.section div.section div+div+div{background-color:aqua;} ★このように、文書構造にしたがってセレクタを書くべきです。いちいちidなんて付けるのはダメです。 まず、CSS2.1のセレクタの書き方とHTML4.01のclass名のつけ方を復習すべきです。 →「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( HTML4.01仕様書 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 →セレクタの詳細度を計算する ( CSS2 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#specificity )
補足
お返事ありがとうございます。 display:box;を設定した場合に、widthを使わない事は知りませんでした。 セレクタにIDがダメなのは、他の人が見た時に「どこ」がはっきり分からないからなのでしょうか、またはSEO対策や他にも何か不具合があるからなのでしょうか。 素人なので基礎知識がほぼ無いため、自分の思った通りに描画ができればいいや的で、基本的な事が分かっていません。 折角セレクタの詳細度のURLを頂きましたが、チンプンカンプンです。 やはりＩＥ９とオペラはboxに対応していないのかダメですね。
お礼
アドバイスありがとうございます。 仕様書も読んでみます。