カラム落ちの対処法について

締切済

質問者：oyajin082
質問日時：2012/07/19 10:42
回答数：2件

独学でＨＴＭＬ５とＣＳＳ３を勉強中で、教本を読みながら以下のようなＣＳＳを書いたところ、Ｆｉｒｅｆｏｘ、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件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2012/07/21 01:04

＞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/h … )」
　なお、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-html4 … )］より
に適合しているし、そのままHTML5に書き直すことも出来る---書き直さなくても<doctype>を書き直すだけでHTML5にはなるけど・・

最後に、この段組でしたら、position:absoluteで行うべきですね。

- 0
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。

仕様書も読んでみます。

通報する

お礼日時：2012/07/26 10:07

No.1

回答者： ORUKA1951
回答日時：2012/07/19 19:38

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-html4 … )」
→セレクタの詳細度を計算する ( CSS2 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

この回答への補足

お返事ありがとうございます。

display:box;を設定した場合に、widthを使わない事は知りませんでした。

セレクタにIDがダメなのは、他の人が見た時に「どこ」がはっきり分からないからなのでしょうか、またはSEO対策や他にも何か不具合があるからなのでしょうか。

素人なので基礎知識がほぼ無いため、自分の思った通りに描画ができればいいや的で、基本的な事が分かっていません。

折角セレクタの詳細度のURLを頂きましたが、チンプンカンプンです。

やはりＩＥ９とオペラはboxに対応していないのかダメですね。

補足日時：2012/07/20 16:04

通報する