こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

独学でHTML5とCSS3を勉強中で、教本を読みながら以下のようなCSSを書いたところ、Firefox、Chrome、Safariではきちんと描画しますが、IE9と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点の回答宜しくお願い致します。

投稿日時 - 2012-07-19 10:42:27

QNo.7598742

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

>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で行うべきですね。

投稿日時 - 2012-07-21 01:04:24

お礼

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

仕様書も読んでみます。

投稿日時 - 2012-07-26 10:07:45

ANo.1

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 )

投稿日時 - 2012-07-19 19:38:22

補足

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

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

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

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

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

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

投稿日時 - 2012-07-20 16:04:47

あなたにオススメの質問