独学で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点の回答宜しくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.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/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で行うべきですね。
No.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-html4 … )」
→セレクタの詳細度を計算する ( CSS2 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
この回答への補足
お返事ありがとうございます。
display:box;を設定した場合に、widthを使わない事は知りませんでした。
セレクタにIDがダメなのは、他の人が見た時に「どこ」がはっきり分からないからなのでしょうか、またはSEO対策や他にも何か不具合があるからなのでしょうか。
素人なので基礎知識がほぼ無いため、自分の思った通りに描画ができればいいや的で、基本的な事が分かっていません。
折角セレクタの詳細度のURLを頂きましたが、チンプンカンプンです。
やはりIE9とオペラはboxに対応していないのかダメですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- Visual Basic(VBA) VBA Boxが空白の場合のメッセージボックス 2 2023/06/14 11:06
- 国産車 ホンダのNシリーズについて 2 2022/07/12 22:57
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- ヤフオク! ヤフオクの支払いについて分かりません。 1 2023/01/22 15:15
- ドラマ 韓国ドラマ「奇皇后」の dvdについて 1 2022/11/24 14:11
- pixiv どうすればpixv Fan Boxを退会できますか? 1 2023/04/23 12:33
- ノンジャンルトーク 親に車買ってもらうって贅沢ですか? もうすぐN BOXを親に買ってもらうんですが N BOXって乗り 2 2022/05/29 16:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のボタンを等間隔に、かつ...
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
【html&css】太さの違う2本線の...
-
HTML属性での「""」 「''」違い
-
html,css初心者です。ヘッダー...
-
divを横に並べる方法
-
一括で全体を右にずらす
-
CSS 余白を作る方法
-
固定幅+可変幅レイアウトがな...
-
HTMLのフォーマットとしてXHTML...
-
inline-blockをネストすると表...
-
フッタの背景画像をリピートxで...
-
hタグの右横に画像を表示
-
HTMLに同じコードを一括挿入
-
IE・NNの独自タグについて
-
画面を縮小するとカラムが落ち...
-
レスポンシブかつ、スマホ、携...
-
WEBデザイン ― ブラウザの横幅...
-
<div id="container">の使いか...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
hタグの右横に画像を表示
-
divを横に並べる方法
-
インラインフレームのページ内...
おすすめ情報